Js实现继承的6种方式

简介: Js实现继承的6种方式

JavaScript 中实现继承的 6 种方式包括:

  1. 原型链继承
  2. 借用构造函数继承
  3. 组合继承(原型链 + 借用构造函数)
  4. 原型式继承
  5. 寄生式继承
  6. 寄生组合式继承

下面是每种方式的详细代码示例:

1. 原型链继承

javascriptfunction Parent() {
this.name = 'Parent';
this.play = [1, 2, 3];
}
function Child() {
this.type = 'Child';
}
Child.prototype = new Parent(); // Child 继承 Parent
let child1 = new Child();
let child2 = new Child();
console.log(child1.name); // Parent
console.log(child1.play === child2.play); // true

2. 借用构造函数继承

javascriptfunction Parent() {
this.name = 'Parent';
this.play = [1, 2, 3];
}
function Child() {
Parent.call(this); // 借用 Parent 构造函数
this.type = 'Child';
}
let child1 = new Child();
let child2 = new Child();
console.log(child1.name); // Parent
console.log(child1.play === child2.play); // false

3. 组合继承(原型链 + 借用构造函数)

javascriptfunction Parent() {
this.name = 'Parent';
this.play = [1, 2, 3];
}
function Child() {
Parent.call(this); // 借用 Parent 构造函数
this.type = 'Child';
}
Child.prototype = new Parent(); // Child 继承 Parent 的原型链
Child.prototype.constructor = Child; // 修复构造函数指向
let child1 = new Child();
let child2 = new Child();
console.log(child1.name); // Parent
console.log(child1.play === child2.play); // true

4. 原型式继承

javascriptfunction object(o) {
function F() {}
F.prototype = o;
return new F();
}
let parent = {
name: 'Parent',
play: [1, 2, 3]
};
let child = object(parent);
child.type = 'Child';
console.log(child.name); // Parent
console.log(child.play === parent.play); // true

5. 寄生式继承

javascriptfunction createAnother(original) {
let clone = object(original); // 通过原型式继承创建对象
clone.sayHello = function() {
console.log('Hello from clone');
};
return clone;
}
let parent = {
name: 'Parent',
play: [1, 2, 3]
};
let child = createAnother(parent);
child.type = 'Child';
console.log(child.name); // Parent
console.log(child.play === parent.play); // true
child.sayHello(); // Hello from clone

6. 寄生组合式继承

javascriptfunction inheritPrototype(child, parent) {
let F = function() {};
F.prototype = parent.prototype;
child.prototype = new F();
child.prototype.constructor = child;
}
function Parent() {
this.name = 'Parent';
this.play = [1, 2, 3];
}
function Child() {
Parent.call(this);
this.type = 'Child';
}
inheritPrototype(Child, Parent);
let child1 = new Child();
let child2 = new Child();
console.log(child1.name); // Parent
console.log(child1.play === child2.play); // false

以上示例展示了 JavaScript 中实现继承的 6 种方式。每种方式都有其特点和应用场景,可以根据具体需求选择合适的方式来实现继承。

相关文章
|
4月前
|
JavaScript
|
4月前
|
JavaScript 前端开发
JS实现继承的6种方式
JS实现继承的6种方式
|
8月前
js-继承
借用(构造函数)继承 / 原型继承 /组合继承 / ES6 的继承语法
|
4月前
|
JavaScript 前端开发 开发者
js常见的七种继承及实现
js常见的七种继承及实现
|
JavaScript Java
JS 的继承
每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针(constructor),而实例都包含一个原型对象的指针(constructor)并指向原想对象。 继承的本质就是复制,即重写原型对象,代之以一个新类型的实例 JS的继承给我独特的印象是, 在java中,继承是复制父类的一份给自己,即使自己把复制过来的东西弄坏了,也不会影响到父类那边的 而js中是通过原型继承,自己弄坏(修改)的,会直接影响到父类本身的东西
73 0
JS 的继承
|
前端开发 JavaScript
前端 js 继承的n种方式
前端 js 继承的n种方式
86 0
|
JavaScript
js是如何实现new一个对象的?
面向对象,从new一个对象开始。在ES6中,引入了关键词`class`来声明一个类,在此之前想要创建一个"类",只能使用函数的方式。可以说,`class`其实就是函数`function`的一个语法糖。有了类,我们就可以使用`new`来创建一个实例对象。
468 0
js是如何实现new一个对象的?
|
JavaScript 前端开发 API
JS 继承的7种方法,你学会了吗?
🌈JS 继承的7种方法,你学会了吗?
111 0
JS 继承的7种方法,你学会了吗?
|
JavaScript
js 继承
构造函数绑定 function Animal() { this.species = '动物'; } function Cat(name,color){ Animal.apply(this, arguments); this.
752 0