1、构造函数、原型和实例的关系
- 每个构造函数都有一个原型对象, 通过prototype指针指向该原型对象.
- 原型对象都包含一个指向构造函数的指针, 通过constructor指针, 指向构造函数
- 而实例都包含一个指向原型对象的内部指针, 该内部指针我们通常使用proto来描述.
2、原型链
- 我们可以通过Person.prototype = {}的方式来重写原型对象.
- 假如, 我们后面赋值的不是一个{}, 而是另外一个类型的实例, 结果会是怎么样呢?
- 显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型对象中也包含着一个指向另一个构造函数的指针。
- 假如另一个原型对象又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型对象的链条。这就是所谓原型链的基本概念。
// 1.创建Animal的构造函数
function Animal() {
this.animalProperty = "Animal"
}
// 2.给Animal的原型中添加一个方法
Animal.prototype.animalFunction = function () {
console.log(this.animalProperty)
}
// 3.创建Person的构造函数
function Person() {
this.personProperty = "Person"
}
// 4.给Person的原型对象重新赋值
Person.prototype = new Animal()
// 5.给Person添加属于自己的方法
Person.prototype.personFunction = function () {
console.log(this.personProperty)
}
// 6.创建Person的实例
var person = new Person()
person.animalFunction()
person.personFunction()
3、实例属性搜索
当以读取模式访问一个实例属性时，首先会在实例中搜索该属性。如果没有找到该属性，则会继续搜索实例的原型。在通过原型链实现继承的情况下，搜索过程就得以沿着原型链继续向上。
在找不到属性或方法的情况下，搜索过程总是要一环一环地前行到原型链末端才会停下来。
参照上面的例子
- 第一步, 在person实例中搜索, 搜索到直接返回或者调用函数. 如果没有执行第二步.
- 第二步, 在Person的原型中搜索, Person的原型是谁? Animal的实例. 所以会在Animal的实例中搜索, 无论是属性还是方法, 如果搜索到则直接返回或者执行. 如果没有, 执行第三步.
- 第三步, 在Animal的原型中搜索, 搜索到返回或者执行, 如果没有, 搜索结束. (当然其实还有Object, 但是先不考虑)
4、判断实例原型
- instanceof：只要是实例与原型链中出现过的构造函数，结果就会返回true。
- isPrototypeOf：只要是原型链中出现过的原型，都可以说是该原型链所派生的实例的原型，因此isPrototypeOf()方法也会返回true
// instanceof
console.log(person instanceof Object)
// true
console.log(person instanceof Animal)
// true
console.log(person instanceof Person)
// true
// isPrototypeOf
console.log(Object.prototype.isPrototypeOf(person))
// true
console.log(Animal.prototype.isPrototypeOf(person))
// true
console.log(Person.prototype.isPrototypeOf(person))
// true
5、原型链模式的问题
- 原型链存在最大的问题是关于引用类型的属性.
- 在创建子类型的实例时，不能向父类型的构造函数中传递参数，这就导致实例继承的属性都一致
function Person() {
this.personProperty = "Person"
}
Person.prototype = new Animal()
Person.prototype.personFunction = function () {
console.log(this.personProperty)
}
var person1 = new Person()
var person2 = new Person()
console.log(person1.colors)
// red,green
console.log(person2.colors)
// red,green
person1.colors.push("blue")
console.log(person1.colors)
// red,green,blue
console.log(person2.colors)
// red,green,blue
6、组合继承
基于原型链的问题我们可以使用组合继承来解决
- 组合继承就是发挥原型链和经典继承各自的优点来完成继承的实现.
- 使用原型链实现对原型属性和方法的继承.
- 通过经典继承实现对实例属性的继承, 以及可以在构造函数中传递参数.
// 1.创建构造函数的阶段
// 1.1.创建Animal的构造函数
function Animal(age) {
this.age = age
this.colors = ["red", "green"]
}
// 1.2.给Animal添加方法
Animal.prototype.animalFunction = function () {
console.log("Hello Animal")
}
// 1.3.创建Person的构造函数
function Person(name, age) {
Animal.call(this, age)
this.name = name
}
// 1.4.给Person的原型对象重新赋值
Person.prototype = new Animal(0)
// 1.5.给Person添加方法
Person.prototype.personFunction = function () {
console.log("Hello Person")
}
// 2.验证和使用的代码
// 2.1.创建Person对象
var person1 = new Person("Tom", 18)
var person2 = new Person("Jury", 30)
// 2.2.验证属性
console.log(person1.name + "-" + person1.age)
console.log(person2.name + "-" + person2.age)
// 2.3.验证方法的调用
person1.animalFunction()
// Hello Animal
person1.personFunction()
// Hello Person
// 2.4.验证引用属性的问题
person1.colors.push("blue")
console.log(person1.colors)
// red,green,blue
console.log(person2.colors)
// red,green
网友评论