JS高级编程课件07_JavaScript ES5实现继承.pdf

JavaScriptES5中实现继承

王红元coderwhy

目录

1对象和函数的原型

content

2new、constructor

3原型链的查找顺序

4原型链实现的继承

5借用构造函数继承

6寄生组合实现继承

coderwhy认识对象的原型

◼JavaScript当中每个对象都有一个特殊的内置属性[[prototype]]，这个特殊的对象可以指向另外一个对象。

◼那么这个对象有什么用呢？

当我们通过引用对象的属性key来获取一个value时，它会触发[[Get]]的操作；

这个操作会首先检查该对象是否有对应的属性，如果有的话就使用它；

如果对象中没有改属性，那么会访问对象[[prototype]]内置属性指向的对象上的属性；

◼那么如果通过字面量直接创建一个对象，这个对象也会有这样的属性吗？如果有，应该如何获取这个属性呢？

答案是有的，只要是对象都会有这样的一个内置属性；

◼获取的方式有两种：

方式一：通过对象的__proto__属性可以获取到（但是这个是早期浏览器自己添加的，存在一定的兼容性问题）；

方式二：通过Object.getPrototypeOf方法可以获取到；

coderwhy函数的原型prototype

◼那么我们知道上面的东西对于我们的构造函数创建对象来说有什么用呢？

它的意义是非常重大的，接下来我们继续来探讨；

◼这里我们又要引入一个新的概念：所有的函数都有一个prototype的属性（注意：不是__proto__）

◼你可能会问题，老师是不是因为函数是一个对象，所以它有prototype的属性呢？

不是的，因为它是一个函数，才有了这个特殊的属性；

而不是它是一个对象，所以有这个特殊的属性；

coderwhy再看new操作符

◼我们前面讲过new关键字的步骤如下：

1.在内存中创建一个新的对象（空对象）；

2.这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；

◼那么也就意味着我们通过Person构造函数创建出来的所有对象的[[prototype]]属性都指向Person.prototype：

coderwhy创建对象的内存表现

functionPerson(){}Person函数的原型对象

prototypeconstructor

varp1=newPerson()

varp2=newPerson()

p1对象

__proto__

p2对象

__proto__

coderwhyprototype添加属性

functionPerson(){}Person函数的原型对象

prototypeconstructor

namewhy

varp1=newPerson()a