• js中constructor和prototype


    在最开始学习js的时候,我们在讲到原型链和构造函数的时候经常会有一个例子

    如果我们定义函数如下:

    function Foo() { /* .. */ }
    Foo.prototype.bar = function(){}; 
    var a1 = new Foo();
    a1.constructor === Foo; // true!

    但是如果我们中间改变了Foo.prototype的定义,那么a1.constructor的指向就改变了。

    function Foo() { /* .. */ }
    Foo.prototype = { /* .. */ }; // 创建一个新原型对象
    var a1 = new Foo();
    a1.constructor === Foo; // false!
    a1.constructor === Object; // true!

    对于这个事实,这里通过我的理解来解释一下。

    首先js中并没有像java这种面向对象语言一样,Foo并不是作为一个类存在,而是普通的函数。当new操作符执行的时候,Foo函数作为构造函数调用,形成a1的原型链,将a1的__proto__关联到Foo.prototype,也就是说这里并不是复制的关系,只是关联,Foo.prototype改变时,a1.__proto__也会改变。

    在第一个例子中a1.constructor === Foo;看起来是a1的constructor指向了Foo,但是事实并非如此。实际上,是在new的时候,a1.constructor被委托给了Foo.prototype.constructor,所以当第二个例子Foo.prototype = {}时,a1.constructor就不再指向Foo了,而是指向了Object。因为如下例子:

    var Foo ={};
    
    console.log(Foo.constructor === Object);//true

    也就是Foo.prototype的constructor属性只是在Foo函数声明的时候默认生成的。如果替换了Foo.prototype的引用,那么constructor也会随之发生改变。

    总结:

    1. constructor属性会在函数声明时默认生成。在利用new创建对象实例时,对象实例本身并没有constructor属性,但对象实例的__proto__属性和Foo.prototype属性关联,行程原型链,因此会通过原型链找到Foo.prototype.constructor属性,并以此为值。

    2. prototype属性可能会被重写,重写后,原来的constructor会发生改变。如果显示为constructor赋值,可以纠正。

    3. 因为constructor的属性很随意,所以慎用。

  • 相关阅读:
    系统分析与设计——作业9
    系统分析与设计——作业8
    系统分析与设计——作业7
    系统分析与设计——作业6
    系统分析与设计——作业5
    系统分析与设计——作业4
    从循环添加事件谈起对JS闭包的理解
    对JS prototype的理解
    系统分析与设计——作业2
    JavaScript 预编译(变量提升和函数提升的原理)
  • 原文地址:https://www.cnblogs.com/Candybunny/p/5488946.html
Copyright © 2020-2023  润新知