JavaScript高级：js中面向对象编程-编程知识

1 引言

1.1 两者的区别

1.2 优缺点

2 封装性

3 原型

3.1 原型对象

3.2 构造函数和原型中的this如何指向

3.2.1 构造函数

3.2.2 原型对象

4 数组扩展案例--> 求和和最大值

5 原型对象中的constructor属性

6 对象原型

7 对象原型中的constructor属性

8 上述总结

9 原型继承

10 原型链

1 引言

JavaScript中大多数情况下都是面向过程编程的，但是也有面向对象编程的情况。那么我们知道面向过程和面向对象这两种编程思想的区别吗？

1.1 两者的区别

-> 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一一个一个调用就可以了。

-> 面向对象就是把事务分解成为一个个对象，然后由对象之间分工与合作。（是以对象功能来划分的，而不是步骤）

1.2 优缺点

（1）面向过程编程

优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。

缺点：没有面向对象易维护、易复用、易扩展。

（2）面向对象编程

优点：易维护、易复用、易扩展、，由于面向对象有封装、继承、多态的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护。

缺点：性能比面向过程低。

2 封装性

封装是面向对象思想中比较重要的一部分，js中面向对象可以通过构造函数实现封装，通过构造函数创建的对象是彼此独立，互不影响的。

// 构造函数  公共的属性和方法封装到 Star 构造函数中，每个实例都可以访问这些属性和方法。
function Star(name, age) {this.name = namethis.age = agethis.sing = function (song) {console.log(song)}
}const a = new Star('张三', 18)
const b = new Star('李四', 20)

虽然构造函数方法很好用，但是存在浪费内存的问题

浪费内存问题的说明：

比如上述的Star构造函数中有一个方法sing，通过 a和b 分别来调用这个方法

按道理它们调用的都是同一个对象中的方法，应是一样的，结果却是false

原因是sing这个属性是复杂数据类型，第一次new 时，会在栈中存的是地址，第二次new时，存的也是地址，两次的地址是不同的

所以由上述可知，两个实例的对象，调用的sing方法的代码是一模一样的，却反复开内存，所以会存在内存浪费的现象，那么我们如何解决这个问题呢？下面将介绍原型对象来解决这个问题。。。

3 原型

3.1 原型对象

每一个构造函数都有一个 prototype 属性，指向另一个对象，所以我们也称为原型对象

这个原型对象可以挂载函数，所以我们对象实例化就不会多次创建原型上的函数了，节约内存。我们可以把那些不变的方法，直接定义再prototype对象上，这样所有的实例就可以共享这些方法了

总结：公共的属性写到构造函数里面，公共的方法写到原型对象身上！！！

3.2 构造函数和原型中的this如何指向

3.2.1 构造函数

let that
function Star(name, age) {that = thisthis.name = namethis.age = agethis.sing = function (song) {console.log(song)}
}const a = new Star('张三', 18)
console.log(that === a)   // true  所以构造函数中的this指向实例对象

所以构造函数中的this指向实例对象

3.2.2 原型对象

原型对象中的函数this还是指向实例对象

4 数组扩展案例--> 求和和最大值

数组中没有求最大值和求和的方法，我们来自定义方法实现效果

【代码】

        // 1.在这边定义的这个方法，任何一个数组的实例对象都可以使用// const arr = new Array(1, 2, 3)const arr = [1, 2, 3]  // arr就是一个实例对象// 2.自定义的方法写到原型身上Array.prototype.max = function () {// 因为数组不能直接丢进去，使用展开运算符展开丢进去return Math.max(...this)   // this就是实例对象 arr}Array.prototype.sum = function () {// this指向实例对象 arrreturn this.reduce((pre, cur) => pre + cur, 0)}console.log(arr.max())  // 3console.log(arr.sum())  // 6

5 原型对象中的constructor属性

每个原型对象都有个constructor属性，该属性指向原型对象的构造函数

function Star() {}const a = new Star()
console.log(Star.prototype.constructor === Star)  // true;

1. 当我们遇到这种情况时：需要在原型身上挂载很多方法时，每次都要重复写

2. 为了解决上述的麻烦，我们可以这样写

3. 按道理原型对象中有constructor属性，但是按照上述这样的写法是，却没有了constructor属性

4. 主要的原因是因为你给原型对象赋值了，找不到它属于哪个构造函数了，我们可以这样解决

6 对象原型

在上述的介绍中，可以将一些共享的方法和属性绑定在原型对象身上，那么我们实例化的对象为什么就可以直接用这些属性和方法呢？那就是因为每一个实例化的对象中都有一个属性 __proto__, 指向构造函数的原型对象，我们称为对象原型。

function Star() {}
const a = new Star()
console.log(a.__proto__)
console.log(a.__proto__ === Star.prototype)  // true

7 对象原型中的constructor属性

对象原型中也有constructor属性，也是指向创建实例对象的构造函数

function Star() {}
const a = new Star()
console.log(a.__proto__)
console.log(a.__proto__.constructor === Star)  // true;

8 上述总结

9 原型继承

js中大多数是利用原型对象来实现面向对象的继承性

1. 比如我们创建两个构造函数 Man() 和 Woman()

function Man() {this.eyes = 2,this.head = 1
}const m = new Man()
console.log(m)function Woman() {this.eyes = 2,this.head = 1
}
const wm = new Woman()
console.log(wm)

2. 但是我们能发现不管 man 还是 woman，还是其它..., 这些属性都是一样的，所以我们可以将这些属性抽取出来封装成一个对象 Person

// 原型继承
const Person = {eyes: 2,head: 1
}// man
function Man() {}
const m = new Man()
console.log(m)// woman
function Woman() {}
const wm = new Woman()
console.log(wm)

3. 此时构造函数 Man() 和 Woman() 需要继承Person的属性，也就是说给构造函数添加上Person中全局且共享的属性，这时候我们就可以想到，可以添加到构造函数的原型身上

4. 我们都知道每个原型对象都有一个 constructor 属性指向构造函数，但是通过上述的继承中，原型对象中的constructor属性没有了

5. 主要原因就是，对构造函数的原型对象进行了赋值，找不到它的父类构造函数了，我们可以收到添加代码，让其指向构造函数

6. 现在我想给 man 添加一个方法，是 man 专有的， women 没有的

但是结果很出乎意料， woman 的原型对象身上也有这个方法

7. 造成上述的原因解释

8. 问题的原因就是它们继承了同一个对象，我们需要解决的话，让他们继承不同的对象，但是继承的对象，内容还要一样，这样想的话，那要创建多少个对象啊！！！

再细想一下，构造函数创建的对象，内容相同，也是不等的，那不就正好满足要求！

总结：就是通过父类构造函数来创建对象，里面含有公共的属性和方法，子类构造函数将父类实例的对象直接添加到原型的身上，达到继承的效果（子构造函数.prototype = new 父构造函数）

10 原型链

1. 通过原型对象和对象原型的学习，我们可以知道以下的关系

2. 对象中含有 __proto__ 属性，指向原型对象。而原型对象也属于对象，所以也有 __proto__ 属性，那么上述的 Person.prototype.__proto__ 有指向哪呢？

我们知道最大的对象是 Object , 它也有原型 Object.prototype, 同时它的原型对象也有Object.prototype.__proto__。

所以可以得到以下的图像：

3. 这个就叫做原型链

5. instanceof 运算符检测构造函数中的prototype属性是否在某个实例对象的原型链上

function Person() {}
const p = new Person()
console.log(p instanceof Person)  // true
console.log(p instanceof Object)  // true