JavaScript面向对象——深入理解默认的继承方式原型链

prtyaa 2023-12-25 16:28:57  51439

分类专栏：资讯

描述：

正如我们所了解，JavaScript中的每个函数中都有一个指向某一对象的prototype属性。该函数被new操作符调用时会创建并返回一个对象，并且该对象中会有一个指向其原型对象的秘密链接，通过该秘密链接（__proto__），我们就可以在新建的对象中调用相关原型对象的方法和属性。

而原型对象自身也具有对象固有的普遍特征，因此本身也包含了指向其原型的链接，由此就形成了一条链，即我们所说的原型链。

如下图所示：在对象A的一系列属性中，有一个叫__proto__的隐藏属性，它指向了另外一个对象B。而B的__proto__属性又指向了对象C，以此类推，直至链条末端的Object对象，该对象是JavaScript的最高级对象，语言中所有对象都必须继承自它。

意义：

在某个属性不存在对象A中，而存在对象B中时，依然可以将它当做A的属性来访问，进而实现代码的重用。

举例说明：

 function Shape() {
        this.name = 'Shape';
        this.toString = function() {
            return this.name;
        };
    }
    function TwoDShape() {
        this.name = '2D shape';
    }
    function Triangle(side, height) {
        this.name = 'Triangle';
        this.side = side;
        this.height = height;
        this.getArea = function() {
            return this.side * this.height/2;
        }
    }
    // 继承实现
    TwoDShape.prototype = new Shape();
    Triangle.prototype = new TwoDShape();
    // 当我们对对象的prototype属性进行完全替换时,需要重置这些对象的constructor属性。
    TwoDShape.prototype.constructor = TwoDShape;
    Triangle.prototype.constructor = Triangle;
 
    // 验证是否已经实现继承
    var my = new Triangle(5, 10);
    console.log(my.toString());
    // 运行结果为:Triangle

解释：

当我们在用Triangle()构造器创建的实例调用构造器不存在的toString()方法时，JavaScript引擎究竟做了什么？

①：遍历my对象中的所有属性，但没有找到一个叫做toString()的方法。
②：查看my.__proto__所指向的对象，该对象是继承关系构建过程中由new TwoDShape()所创建的实体。
③：JavaScript引擎在遍历TwoShape实体的过程中依然不会找到toString方法，这时候，__proto__属性所指向的实体是new Shape()所创建的实体。
④：在new Shape()创建的实体对象中找到toString()方法。
⑤：toString()方法在my对象中调用，并且其this指向my。

继承后的一些验证：

①：my的构造函数是：my.constructor === Triangle; 运行结果：ture.
②：my对象同时是上述三个构造器的实例，以下运行结果均为true，即：my同时是三个构造器的实例

my instanceof Shape; my instanceOf TwoDShape; my instanceOf Triangle;

扩展：将共享属性迁移到原型中去

背景描述：当我们用某一个构造器创建对象时，其属性就会被添加到this中去。并且当被添加的属性实际上不会随着实体改变时，这种做法就会显得很没有效率。比如在上面的示例中，Shape()构造器是这样定义的：

function Shape(){
    this.name = 'Shape';
}

这种实现即意味着我们用new Shape()创建的每个实体都会拥有一个全新的name属性，并在内存中拥有自己独立的存储空间。

解决办法：将name属性移到原型上去，这样一来，所有实体就可以共享这个属性：

function Shape(){};
Shape.prototype.name = 'Shape';

将name移到prototype上后，用new Shape()创建对象时，name属性就不再是新对象的私有属性了，而是被添加到了该对象的原型中，这样做的前提是该属性是不可变的，对象的共享方法就非常适合这种共享形式。

下面对以上的例子进行改造，把符合条件的方法和属性移到原型中去。

    // constructor
    function Shape() {}
    // argument prototype
    Shape.prototype.name = 'Shape';
    Shape.prototype.toString = function() {
        return this.name;
    };
 
    // another constructor
    function TwoDShape() {}
    // take care of inheritance
    TwoDShape.prototype = new Shape();
    TwoDShape.prototype.constructor = TwoDShape;
    //argument prototype
    TwoDShape.prototype.name = '2D shape';
 
    // another constructor
    function Triangle(side, height) {
        this.side = side;
        this.height = height;
    }
    // take care of inheritance
    Triangle.prototype = new TwoDShape();
    Triangle.prototype.constructor = Triangle;
    // argument prototype
    Triangle.prototype.name = 'Triangle';
    Triangle.prototype.getArea = function() {
        return this.side * this.height/2;
    }
 
    // 验证是否已经实现继承
    var my = new Triangle(5, 10);
    console.log(my.toString());
    // 运行结果为:Triangle

在调用my.toString()时，主要区别是查找操作将更多地发生在Shape.prototype中，而不再需要像前面示例中那样，到由new Shape()所创建的实体对象中查找。

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30633

赞同 0

评论 0 条

JavaScript面向对象——深入理解默认的继承方式原型链

描述：

相关文章

关注我们