美文网首页
JavaScript实现继承

JavaScript实现继承

作者: _于易 | 来源:发表于2018-01-03 20:32 被阅读15次

    JavaScript是一门面向对象的编程语言,但是由于设计上的原因它没有像其他面向对象的语言一样有类的概念(在ES6里加入了class的语法糖),那么JavaScript是怎样实现继承的呢?答案就是原型链。
    添加在构造函数prototype对象属性上的方法可以被构造函数所创造出的实例查找共用,这一点我们都知道,具体实现的方法就是让实例内部的指针__proto __指向构造函数的prototype对象。就是依据这个东西建立起来的原型链。

    原型链

    这里给出一个实现继承的例子:

    function Dialog(target) {
        this.target = target
    }
    Dialog.prototype.show = function() {
        console.log(this.target + ' show')
    }
    Dialog.prototype.hide = function() {
        console.log(this.target + ' hide')
    }
    var dialog = new Dialog('body')
    dialog.show()
    
    function Message(target, name) {
        Dialog.call(this, target)     //这句很重要
        this.name = name
    }
    Message.prototype = Object.create(Dialog.prototype)   //这句更重要
    Message.prototype.success = function() {
        console.log(this.name + ' success' )
    }
    
    var msgBox = new Message('main', 'msg')
    msgBox.show()
    msgBox.success()
    

    代码中的 Object.create() 函数作用是创建一个具有指定原型且可选择性地包含指定属性的对象。其语法为Object.create(prototype, descriptors),返回值是一个具有指定的内部原型且包含指定的属性(如果有)的新对象。

    ES6的class继承

    class ColorPoint extends Point {
      constructor(x, y, color) {
        super(x, y); // 等同于parent.constructor(x, y)
        this.color = color;
      }
      toString() {
        return this.color + ' ' + super.toString(); // 等同于parent.toString()
      }
    }
    
    

    相关文章

      网友评论

          本文标题:JavaScript实现继承

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