js中constructor和prototype

时间:2022-09-09 13:42:32

在最开始学习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 的多线程编程的高效开发经验

    Linux 平台上的多线程程序开发相对应其他平台(比如 Windows)的多线程 API 有一些细微和隐晦的差别.不注意这些 Linux 上的一些开发陷阱,常常会导致程序问题不穷,死锁不断.本文中我们 ...

  2. the assignment of reading paper

    在 IEEE 上找到Increasing Dependability of Component-based Software Systems by Online Failure Prediction, ...

  3. centOS tengine 安装后 不能访问的问题

    1 安装方式跟在ubuntu下 安装一样.因为都是用源码 2  但安装好以后发现,局域网电脑访问不了!.原以为是安装错了.又装了一遍,还是不行,最终是iptables 没开放80端口... http: ...

  4. [转] C++临时变量的生命周期

    http://www.cnblogs.com/catch/p/3251937.html C++中的临时变量指的是那些由编译器根据需要在栈上产生的,没有名字的变量. 主要的用途主要有两类: 1) 函数的 ...

  5. 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

    一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...

  6. 【javascript】谈谈HTML5 ——HTML兽进化, H5兽!

    作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它   打个比方:<海贼王>中的 ...

  7. django搭建web &lpar;二&rpar; urls&period;py

    URL模式: 在app下的urls.py中 urlpatterns=[ url(正则表达式,view函数,参数,别名,前缀)] urlpatterns=[ url(r'^hello/$',hello. ...

  8. scala学习笔记1(表达式)

    <pre name="code" class="plain">//Scala中的 main 函数需要存在于 object 对象中,我们需要一个obj ...

  9. VMware Workstation14 安装Ubuntu18&period;04

    1 下载Vmware Workstations14破解版 百度网盘链接:https://pan.baidu.com/s/12yVxoPCJUAmdts4SUdzndg 提取码:bs0g 2 下载Ubu ...

  10. &lt&semi;Android基础&gt&semi; &lpar;六&rpar; 数据存储 Part 2 SharedPreferences方式

    6.3 SharedPreferences存储 SharedPreferences使用键值对的方式来存储数据.同时支持多种不同的数据类型. 6.3.1 将数据存储到SharedPreferences中 ...