es5 继承 es6继承

90 阅读1分钟

es5 的继承

原型链的继承模式

原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法

1)优点

简单明了,容易实现

实例是子类的实例,实际上也是父类的一个实例

父类新增原型方法/原型属性,子类都能访问

2)缺点

所有子类的实例的原型都共享同一个超类实例的属性和方法

无法实现多继承

在创建子类的实例时 不能向父类的构造函数传递参数

          function Person(name, age) {
            this.name = name; /*属性*/
            this.age = age;
            this.run = function() {
                /*实例方法*/
                alert(this.name + "在运动");
            };
        }
        Person.prototype.sex = "男";
        Person.prototype.work = function() {
            alert(this.name + "在工作");
        };

        function Web(name, age) {}

        Web.prototype = new Person();

        var w = new Web("赵四", 20); 

        w.run();   ----》输出的是 undefined在运动

        var w1 = new Web("王五", 22);
  2: 

对象冒充继承

call和apply方法

对象冒充可以继承构造函数里面的属性和方法 但是没法继承原型链上面的属性和方法

原型链+对象冒充的组合继承模式

   function A (color){
	this.color = color
}
A.prototype.sayColor = function(){
	console.log(this.color)
}
function B(sColor,name){
	A.call(this,sColor);
	this.name = name;
}
B.prototype = new A();
B.prototype.sayName = function(){
	console.log(this.name)
}
var b = new B("red","nik")

复制代码请注意: 在执行 B.prototype = new A(); 之后,B.prototype.constructor 指向A 。然而constructor的定义是要指向原型属性对应的构造函数的,B.prototype是B构造函数的原型,所以应该添加一句纠正:

B.prototype.constructor = B;

相关阅读: 链接:juejin.cn/post/684490…

es6 继承

使用extends 继承