在最开始学习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. Angular $watch

    如果想在某个属性发生变化的时候执行某些操作,那么scope.$watch是最佳选择 https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$w ...

  2. Sublime 快捷键

    语法快捷键: 后代:> 缩写:nav>ul>li <nav> <ul> <li></li> </ul> </nav& ...

  3. v-if VS v-show

    在vue实现轮播图效果 中分别用到 v-if和 v-show 下面讲讲我理解的他们的区别: v-if: 根据表达式的值的真假条件渲染元素.在切换时元素及它的数据绑定 / 组件被销毁并重建.如果元素是 ...

  4. Bootstrap Metronic 学习记录(一)简介

    1.简介 是一个基于Bootstrap 3.x的高级管理控制面板主题.Bootstrap Metronic - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小 ...

  5. 创建第一个 local network(I) - 每天5分钟玩转 OpenStack(80)

    在 ML2 配置文件中 enable local network 后,本节将开始创建第一个 local network. 我们将通过 Web GUI 创建第一个 local network. 首先确保 ...

  6. Neutron 功能概述 - 每天5分钟玩转 OpenStack(65)

    从今天开始,我们将学习 OpenStack 的 Networking Service,Neutron.Neutron 的难度会比前面所有模块都大一些,内容也多一些.为了帮助大家更好的掌握 Neutor ...

  7. Description Resource Path Location Type Error executing aapt: Return code -1073741819 Client line 1

    Logcat报错:Description    Resource    Path    Location Type Error executing aapt: Return code -1073741 ...

  8. CentOS 7下MySQL服务启动失败的解决思路

    今天,启动MySQL服务器失败,如下所示: [root@spark01 ~]# /etc/init.d/mysqld start Starting mysqld (via systemctl): Jo ...

  9. Lua 学习笔记(五)函数

    函数的定义:在Lua中,函数是一种对语句和表达式进行抽象的主要机制. 一.函数基本用法        在Lua中,      1.函数既可以完成某项特定的任务.(被视为一条语句)      2.也可以 ...

  10. (三)WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(核心)

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或 ...