在最开始学习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的属性很随意,所以慎用。

js中constructor和prototype的更多相关文章

  1. JS中constructor与prototype关系概论

    在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下:     我们都知道,在JS中有一个function的东西. ...

  2. JS中constructor,prototype

    First: this this定义: this就是函数赖以执行的对象. 分析这句话: 1. this是对象. 2. this依赖函数执行的上下文环境. 3. this存在函数中. 直接看例子: al ...

  3. js中constructor的作用

    在学习过程中对js的constructor的作用产生了疑问.下面是学习的资料进行梳理 function Person(area){ this.type = 'person'; this.area = ...

  4. js中__proto__和prototype的区别和关系?

    _proto__(隐式原型)与prototype(显式原型)1.是什么 显式原型 explicit prototype property: 每一个函数在创建之后都会拥有一个名为prototype的属性 ...

  5. 说一说js中__proto__和prototype以及原型继承的那些事

    在面试中遇到过,问js如何实现继承,其实最好的方式就是构造函数+原型,今天在讨论中,发现自己以前理解上的一些误区,特地写出来,最近都比较忙,等手上的项目做完,可以来做个总结. 先说我以前没有认识到位的 ...

  6. js中 __proto__ 和 prototype

    js中的对象都有__proto__属性存在[隐式原型],注意是两个_, 1,javascript对象的__proto__指向的是该对象的构造函数的原型对象,即constructor.prototype ...

  7. js中的原型prototype

    var arr1 = new Array(12,34,98,43,38,79,56,1); arr1.sum=function (){ var result = 0; for(var i=0; i&l ...

  8. js中__proto__和prototype constructor 的区别和关系

    https://www.zhihu.com/question/34183746 javaScript原型.原型链的定义? prototype:每个函数都有一个prototype(显式原型),这个属性是 ...

  9. 理解js中__proto__和prototype的区别和关系

    首先,要明确几个点:1.在JS里,万物皆对象.方法(Function)是对象,方法的原型(Function.prototype)是对象.因此,它们都会具有对象共有的特点.即:对象具有属性__proto ...

随机推荐

  1. 获取Linux主机的CPU、内存、主板、BIOS的信息(Centos)

    #!/usr/bin/env python #coding:utf-8 import subprocess import re def Cmd_Exec(cmd): ''' 执行获取信息命令 :par ...

  2. KnockoutJS 3.X API 第七章 其他技术(6) 使用“fn”添加自定义函数

    有时,您可能会通过向Knockout的核心值类型添加新功能来寻找机会来简化您的代码. 您可以在以下任何类型中定义自定义函数: 因为继承,如果你附加一个函数到ko.subscribable,它将可用于所 ...

  3. lua解析脚本过程中的关键数据结构介绍

    在这一篇文章中我先来介绍一下lua解析一个脚本文件时要用到的一些关键的数据结构,为将来的一系列代码分析打下一个良好的基础.在整个过程中,比较重要的几个源码文件分别是:llex.h,lparse.h.l ...

  4. MVC4做网站六后台管理:6.2网站信息设置

    用来实现网站标题.名称.关键字.描述.版权等信息的设置. 模型字段: 网站的设置信息前后台都要用到,所以要把模型方式Ninesky/Models文件夹中,代码如下: ///////////////// ...

  5. JavaScript阻塞剖析与改善

    一.阻塞特性 <高性能JavaScript>一书中,关于第一章“Loading and Execution”,提到了无阻塞加载JavaScript技术,目的是为了提高页面呈现速度. 说到无 ...

  6. Oracel_子查询

    SQL子查询 子查询语法 SELECT select_list FROM table WHERE expr operator (SELECT select_list FROM table) 子查询 ( ...

  7. 编写简单的ramdisk(无请求队列)

    最近在研究块设备驱动的编写,看了赵磊大牛的<写一个块设备驱动>,受益匪浅,虽然能看懂里面说的,但动手写写代码还是能加深理解的,下面实现的ramdisk写的很简单,如果有错误,欢迎大牛们指正 ...

  8. TCP三次握手,四次挥手

    前言 在面试的过程中,TCP的传输协议经常会出现.以前我参加面试的过程中就被问到过,现在轮到我面试其他人的时候,我也会问一些相关的问题.作为一名开发者,无论使用什么样的开发语言,最基本的网络知识一定要 ...

  9. CloudNotes之桌面客户端篇:增强的笔记列表

    今天,我发布了CloudNotes的一个更新版本:1.0.5484.36793.这个版本与1.0.5472.20097不同的是,它拥有增强的笔记列表,与之前单调的列表系统相比,新的笔记列表不仅可以显示 ...

  10. MySQL常用SQL总结

    1. 常见命令 连接本地数据库与远程数据库(172.16.xx.xx:3306): mysql -h localhost -u root -p123 mysql -h 172.16.xx.xx -P ...