下面是关于“15分钟深入了解JS继承分类、原理与用法”的完整攻略。
一、JS继承分类
JS继承可以分为以下几种类型:
- 原型链继承
- 借用构造函数继承
- 组合继承
- 原型式继承
- 寄生式继承
- 寄生组合式继承
二、JS继承原理
JS中的继承是基于原型的,每个对象都有__proto__
属性,该属性指向对象的原型对象,原型对象又有__proto__
属性,依次形成了一个原型链。当我们访问一个对象的属性时,如果该对象本身没有该属性,就会沿着原型链往上查找,直到找到该属性或者到达原型链的末尾为止。
三、JS继承用法
1. 原型链继承
原型链继承就是将父类的实例作为子类的原型,子类可以通过原型链继承到父类的属性和方法。
function Parent() {
this.name = 'parent';
this.sayHello = function() {
console.log('Hello ' + this.name);
};
}
function Child() {}
Child.prototype = new Parent();
// test
var child = new Child();
child.sayHello(); // Hello parent
2. 借用构造函数继承
借用构造函数继承就是子类使用父类的构造函数来构造自己的对象,相当于复制父类的属性和方法,实现了对父类属性的继承。但是父类原型中的方法和属性是无法继承的。
function Parent() {
this.names = ['parent1', 'parent2'];
}
function Child() {
Parent.call(this);
}
// test
var child1 = new Child();
child1.names.push('child1');
console.log(child1.names); // ["parent1", "parent2", "child1"]
var child2 = new Child();
console.log(child2.names); // ["parent1", "parent2"]
3. 组合继承
组合继承是将原型链继承和借用构造函数继承结合起来。通过原型链来实现对父类原型中方法和属性的继承,通过借用构造函数来实现对父类实例属性的继承。
function Parent() {
this.name = 'parent';
this.names = ['parent1', 'parent2'];
}
Parent.prototype.sayHello = function() {
console.log('Hello ' + this.name);
}
function Child() {
Parent.call(this);
this.age = 18;
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
// test
var child = new Child();
child.names.push('child');
console.log(child.names); // ["parent1", "parent2", "child"]
child.sayHello(); // Hello parent
4. 原型式继承
原型式继承是通过原型对象来实现继承,它的本质是对一个对象的封装,返回一个可以继承该对象属性和方法的新对象。
var parent = {
name: 'parent',
sayHello: function() {
console.log('Hello ' + this.name);
}
};
var child = Object.create(parent);
child.name = 'child';
// test
child.sayHello(); // Hello child
5. 寄生式继承
寄生式继承是在原型式继承的基础上添加一些方法和属性,返回一个继承了原对象的扩展对象。
var parent = {
name: 'parent',
sayHello: function() {
console.log('Hello ' + this.name);
}
};
function createChild(obj) {
var child = Object.create(obj);
child.sayHi = function() {
console.log('Hi ' + this.name)
}
return child;
}
var child = createChild(parent);
child.name = 'child';
// test
child.sayHi(); // Hi child
child.sayHello(); // Hello child
6. 寄生组合式继承
寄生组合继承是将组合继承中的一个缺点——继承原型对象时调用了一次父类构造函数——通过寄生继承方式解决。
function Parent() {
this.name = 'parent';
}
Parent.prototype.sayHello = function() {
console.log('Hello ' + this.name);
}
function Child() {
Parent.call(this);
this.age = 18;
}
function createObject(obj) {
function F() {}
F.prototype = obj;
return new F();
}
Child.prototype = createObject(Parent.prototype);
Child.prototype.constructor = Child;
// test
var child = new Child();
console.log(child.name); // parent
console.log(child.age); // 18
child.sayHello(); // Hello parent
以上就是关于“15分钟深入了解JS继承分类、原理与用法”的完整攻略,希望能对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:15分钟深入了解JS继承分类、原理与用法 - Python技术站