ES5 继承实现

作者: 圆梦人生 | 来源:发表于2019-03-05 16:38 被阅读0次

ES5中继承主要3种方式:

  • 1、对象冒充
    • 缺点:无法调用原型链方法
  • 2、原型链
    • 缺点:无法调用父类构造方法
  • 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();

相关文章

  • 继承:es5 vs es6

    es5如何实现继承 es5实现继承主要是通过原型来实现的 首先实现一个父类 function Father(na...

  • ES5和ES6中继承的不同之处

    ES5和ES6中继承的不同之处 1、JS中视没有继承的,不过可以通过构造函数或是原型等实现继承,ES5实现继承的方...

  • 如何用es5实现继承

    extend (继承) 如何用 es5 实现继承 测试 结果 原文链接

  • 前端常见面试题(八)@郝晨光

    ES5/ES6 的继承除了写法以外还有什么区别? ES5寄生组合式继承(只是列举一个方法,ES5继承还有很多实现方...

  • 用ES5和ES6实现继承

    ES5 prototype实现继承 ES6 写法

  • Class 的继承 extend继承 es6继承基本用法

    Class继承基本用法 Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,...

  • 继承

    原型链继承 许多OO语言都支持两种继承方式接口继承和实现继承,ES5只有实现继承,且主要依靠原型链继承。 那我们先...

  • 浅谈JavaScript原型、原型链的概念与继承的实现原理

    关于js对象的继承,es5和es6提供了两种不同的继承机制。es5通过修改原型链的方式实现继承,由此可见继承与原型...

  • 面向对象类

    类与实例 类的声明 ES5 ES6 生成实例 类与继承 如何实现继承 继承的几种方式 原型链是实现继承的主要方法 ...

  • Class 的继承

    一、简介 Class 可以通过 extends 关键字实现继承,这比 ES5 通过修改原型链实现继承更加清晰和方便...

网友评论

    本文标题:ES5 继承实现

    本文链接:https://www.haomeiwen.com/subject/imsouqtx.html