JS的六种继承方式

最新推荐文章于 2024-05-17 13:52:13 发布

蒙面大婶l

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量29

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/mengxiaodi/article/details/134479937

版权

什么是继承？

所谓继承就是通过某种方式让一个对象可以访问到另一个对象中的属性和方法。

继承的六种方式：

原型链继承
构造函数继承
组合继承
原型式继承
寄生式继承
寄生组合式继承

一、原型链继承

子类构造函数的原型改变成为父类的实例化对象
缺点：
1.在创建s不能向Father构造函数传参的
2.所有的自实例对象公用一个原型对象，如果有一个子实例对象对原型中的数据进行改变，其他子实例对象拿到的数据也会被改变

function Parent() {
  this.name = 'Parent';
}
Parent.prototype.sayHello = function() {
  console.log('Hello');
};
function Child() {
  this.name = 'Child';
}
Child.prototype = new Parent();
var child = new Child();
child.sayHello();

二、构造函数继承

构造函数继承是通过在子构造函数中调用父构造函数来实现继承。在构造函数继承中，通过在子构造函数中使用call()或apply()方法，将父构造函数的上下文设置为子对象的上下文，从而实现继承。

优点：

1.解决了原型链继承的第一个缺点,可以向父类传参

2.可以继承多个构造函数的属性（call多个）

缺点：

1.没有继承父类原型的成员

2.无法实现父类构造函数的复用性（每次创建实例化对象s时都会让父类构造函数的this再被改变一次）

        function Father(name){
            this.name = name;
        }
        Father.prototype.getName = function(){
            console.log(this.name)
        }
        function Son(sname){
            Father.call(this,sname)
            this.sonname = "jack";
        }
        var s = new Son("rose")
        var s1 = new Son("qwe")

三、组合继承

组合继承结合了原型链继承和构造函数继承，既继承了父构造函数的属性，又继承了父构造函数原型对象上的方法。在组合继承中，通过调用父构造函数的方式实现属性的继承，通过将子构造函数的原型对象指向父构造函数的实例实现方法的继承。

        function Father(name){
            this.name = name;
        }
        Father.prototype.age = 10;
        function Son(sname){
            Father.call(this,sname)//构造函数继承
            this.sonname = "jack"
        }
        Son.prototype.attr = "蒙面大婶";
        Son.prototype = new Father()//原型链继承
        var s = new Son("rose")

四、原型式继承

原型式继承是通过使用一个临时构造函数和Object.create()方法来实现继承。

        var obj= {
            name: 'Parent',
            sayHello: function () {
                console.log('Hello from ' + this.name);
            }
        }
        var child = Object.create(parent);
        child.name = 'Child';
        child.sayHello();

五、寄生式继承

寄生式继承的思路与(寄生) 原型式继承 和 工厂模式 似, 即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象。

function createAnother(origin) {
  var clone = Object.create(origin); 
  clone.sayHi = function() {
    alert("Hi");
  };
  return clone;
}
var o1 = {
  name: "父对象",
  hobbies: ["大婶", "二叔"]
};
var o2 = createAnother(o1);
o2.sayHi();

六、寄生组合式继承

function Parent(name) {
  this.name = name;
  this.hobbies = ["大婶", "二叔"];
}
Parent.prototype.getHobbies = function(){
  return this.hobbies
}
function Child(name) {
  Parent.call(this, name);
  this.age = 20
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
var c1 = new Child('c1');
var c2 = new Child('c2');
console.log(c1 instanceof Child);
console.log(c1 instanceof Parent);
console.log(c1.constructor);
console.log(Child.prototype.__proto__ === Parent.prototype);
console.log(Parent.prototype.__proto__ === Object.prototype);
c1.hobbies.push('coding');