**
关于 js原型与 原型链
所有引用类型(对象)都有一个__proto__(隐式原型)属性,属性值是一个普通的对象 指向该对象构造函数的prototype(原型对象)
所有函数都有一个prototype(原型)属性,属性值是一个普通的对象
所有的prototype都有一个construction属性,它是一个指针,指向当前函数(构造函数)
那问题来了?什么是原型链?
当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的__proto__隐式原型上查找,即它的构造函数的prototype,如果还没有找到就会再在构造函数的prototype的__proto__中查找,这样一层一层向上查找就会形成一个链式结构,我们称为原型链
1.原型链继承
核心:将父类的实例作为子类的原型。
// 父类
function Parent() {
this.value = 'value';
}
Parent.prototype.sayHi = function() {
console.log('Hi');
}
// 子类
function Child() {
}
// 改变儿子的prototype属性为父亲的实例
Child.prototype = new Parent();
Child.prototype.constructor=Child;
var child = new Child();
// 首先现在child实例上进行查找,未找到,
// 然后找到原型对象(Parent类的一个实例),在进行查找,未找到,
// 在根据__proto__进行找到原型,发现sayHi方法。
// 实现了Child继承
child.sayHi();
但是这种继承方式存在一个问题,那就是引用类型属性共享
// 父类
function Parent() {
this.color = ['pink', 'red'];
}
// 子类
function Child() {
}
Child.prototype = new Parent();
var child1 = new Child();
var child2 = new Child();
// 先输出child1和child2种color的值
console.log(child1.color); // ["pink", "red"]
console.log(child2.color); // ["pink", "red"]
// 在child1的color数组添加white
child1.color.push('white');
console.log(child1.color); // ["pink", "red", "white"]
// child1上的改动,child2也会受到影响
console.log(child2.color); // ["pink", "red", "white"]
它存在第二个问题,就是无法向父类种传参。
2.构造函数(类继承)
核心:即在子类型构造函数的内部调用父类型构造函数。
在这里,我们借用call函数可以改变函数作用域的特性,在子类中调用父类构造函数,复制父类的属性。此时没调用一次子类,复制一次。此时,每个实例都有自己的属性,不共享。同时我们可以通过call函数给父类传递参数。
2.1 解决引用类型共享问题
// 父亲类
function Parent(name) {
this.name = name;
this.color = ['pink', 'red'];
}
// 儿子类
function Child() {
Parent.call(this);
// 定义自己的属性
this.value = 'test';
}
var child1 = new Child();
var child2 = new Child();
// 先输出child1和child2种color的值
console.log(child1.color); // ["pink", "red"]
console.log(child2.color); // ["pink", "red"]
// 在child1的color数组添加white
child1.color.push('white');
console.log(child1.color); // ["pink", "red", "white"]
// child1上的改动,child2并没有受到影响
console.log(child2.color); // ["pink", "red"]
2.2 解决传参数问题
function Parent(name) {
this.name = name;
this.color = ['pink', 'red'];
}
// 儿子类
function Child() {
//继承Parent,同时还传递了参数 --重新创建Child构造函数属性的副本
Parent.call(this, "zhangsan");
// 定义自己的属性
this.value = 'test';
}
var child = new Child();
// 将zhangsan传递给Parent
console.log(child.name); // zhangsan
console.log(child.value); //test
缺点:共享的方法都在构造函数中定义,无法达到函数复用的效果
3.组合继承(混合继承)
核心:原型继承+构造函数继承
利用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能保证每个实例都有自己的属性。
// 父亲类
function Parent(name) {
this.name=name
this.color = ['pink', 'red'];
}
Parent.prototype.sayHi = function() {
console.log('Hi');
}
// 儿子类
function Child(name) {
// 借用构造函数继承
//向Parent传参
Parent.call(this,name);
// 下面可以自己定义需要的属性
}
// 原型链继承
Child.prototype = new Parent();
var child1 = new Child('zhangsan');
var child2 = new Child('lisi');
consloe.log(child1.name) //zhangsan
consloe.log(child2.name) //lisi
// 每个实例特有的属性
// 先输出child1和child2种color的值
console.log(child1.color); // ["pink", "red"]
console.log(child2.color); // ["pink", "red"]
// 在child1的color数组添加white
child1.color.push('white');
console.log(child1.color); // ["pink", "red", "white"]
// child1上的改动,child2并没有受到影响
console.log(child2.color); // ["pink", "red"]
// 每个实例共享的属性
child1.sayHi(); // Hi
child2.sayHi(); // Hi
组合继承避免了原型链和借用构造函数的缺陷,融合它们的优点,成为JavaScript中最常用的继承模式
4.原型继承
核心:借用构造函数的原型对象实现继承
function Student(props) {
this.name = props.name ;
}
Student.prototype.hello = function() {
alert('Hello, ' + this.name + '!');
}
// PrimaryStudent构造函数:
function PrimaryStudent(props) {
Student.call(this, props);
this.grade = props.grade ;
}
// 空函数F:
function F() {}
// 把F的原型指向Student.prototype:
F.prototype = Student.prototype;
// 把PrimaryStudent的原型指向一个新的F对象,F对象的原型正好指向Student.prototype:
PrimaryStudent.prototype = new F();
// 把PrimaryStudent原型的构造函数修复为PrimaryStudent:
PrimaryStudent.prototype.constructor = PrimaryStudent;
// 继续在PrimaryStudent原型(就是new F()对象)上定义方法:
PrimaryStudent.prototype.getGrade = function() {
return this.grade;
};
// 创建xiaoming:
var xiaoming = new PrimaryStudent({
name: '小明',
grade: 2
});
console.log(xiaoming.name); // '小明'
console.log(xiaoming.grade); // 2
// 验证原型:
console.log(xiaoming.__proto__ === PrimaryStudent.prototype); //true
console.log(xiaoming.__proto__.__proto__ === Student.prototype) //true
// 验证继承关系:
console.log(xiaoming instanceof PrimaryStudent); //true
console.log(xiaoming instanceof Student) //true
小结:
1 定义新的构造函数,并在内部用call()调用希望“继承”的构造函数,并绑定this;
2.借助中间函数F实现原型链继承,
3.继续在新的构造函数的原型上定义新方法
原型继承参考链接:https://www.liaoxuefeng.com/wiki/1022910821149312/1023021997355072