1024Java 核心技术JavaScript 进阶营

ES5 继承实现

2019-03-05  本文已影响0人  圆梦人生

ES5中继承主要3种方式:

案例:

// es5 继承
// es5中继承主要2种方式:
    // 1、对象冒充
    // 2、原型链

// 定义类
function person(name, age){
    this.name = name;
    this.age = age
    
    this.run = function(){
        console.log(name + '跑步');
    }
}
// 原型链挂载方法
// 多个实例共享原型链的方法
person.prototype.work = function(){
    console.log(this.name + '工作');
}

var p = new person('张三', 20);
p.run();
p.work();

var pp = new person('张三丰', 33);
pp.run();
pp.work();

// 1、对象冒充方式
// 缺点:无法调用原型链方法
function people(name, age){
    person.call(this, name, age)
}
var p1 = new people('李四',30);
p1.run();
// p1.work(); // p1.work is not a function 无法调用原型链数据

// 2、原型链实现继承
// 原型链缺点,无法调用父类构造方法
function people2(name, age){

}
people2.prototype.work = person.prototype.work
var p2 = new people2('王五', 30);
p2.work(); // undefined工作,原型链缺点,无法调用父类构造方法

// 3、对象 + 原型链实现继承
function people3(name, age){
    // 对象冒充
    person.call(this, name, age);
}
// 原型链
people3.prototype = person.prototype;
var p3 = new people3('赵六', 40);
p3.run();
p3.work();

上一篇 下一篇

猜你喜欢

热点阅读