js中constructor的作用
在学习过程中对js的constructor的作用产生了疑问。下面是学习的资料进行梳理
function Person(area){
this.type = 'person';
this.area = area;
}
Person.prototype.sayArea = function(){
console.log(this.area);
}
var Father = function(age){
this.age = age;
}
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor) //function person()
console.log(Father.prototype.constructor); //function person()
Father.prototype.constructor = Father; //修正
console.log(Father.prototype.constructor); //function father()
var one = new Father();
Father.prototype.constructor = Father,这里修正了的Father的constructor。我们知道prototype下的constructor属性返回对创建此对象的函数的引用。
一、不修正时
Father.constructor = function Function(),Father.prototype.constructor = function Person(),这里引出
一个题外话,为什么Father.constructor !== Father.prototype.constructor。1. _proto_是所有对象(包括函数)都有的,它才叫做对象的原型,原型链就是靠它形成的。2. prototype只有函数(准确地说是构造函数)才有的。它跟原型链没有关系。它的作用是:构造函数new对象的时候,告诉构造函数新创建的对象的原型是谁。
Father.constructor,是从Father的原型链查找属性,也就是__proto__,因为Father继承的是Function(){},而Function(){}的constructor就是它自己
所以Father.constructor = function Function();
为什么Father.prototype.constructor 是 function Person(),首先Father.prototype = new Person('Beijin');当我们用new
运算符会产生以下步骤:
- var obj={}; 也就是说,初始化一个对象obj。
- obj.__proto__=a.prototype;
- a.call(obj);也就是说构造obj,也可以称之为初始化obj。
也就是说(new Person('Beijin')).__proto__ === Person.prototype //true
前面我们说过new Person('Beijin')对象是没有prototype的,prototype只有函数才有;Father.prototype.constructor将会沿着new Person('Beijin')的
原型链向下查找constructor,new Person('Beijin')没有constructor就去它的__proto__找,因为(new Person('Beijin')).__proto__ === Person.prototype
而Person.prototype.constructor == function Person(),所以 Father.prototype.constructor == Person.prototype.constructor //function Person()
当我们var one = new Father(25) 时 ,one.constructor = Father.prototype.constructor,所以one.constructor指向function Person(),

二、修正时
当我们加上Father.prototype.constructor = Father;对象one的原型链变成
显而易见,one.constructor = Father.prototype.constructor = function Father(); 三、作用
var man;
(function(){
function Father (name) {
this.name = name;
} Father.prototype.sayName= function () {
console.log(this.name);
}
man = new Father('aoyo');
})()
man.sayName();//aoyo console.log(Father); //Father is not defined
因为Father在闭包中,当我们想对Father类增加方法时可以通过
man.constructor.prototype.sayAge = function(age){
console.log(age);
}
man.sayAge('20'); //
如果不进行修正,我们的方法将会添加到Person类,而不是Father类。
js中constructor的作用的更多相关文章
- js中getBoundingClientRect的作用及兼容方案
js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...
- JS中冒号的作用
JS中冒号的作用1.声明对象的成员2.switch语句分支3.三元表达式 1.声明对象的成员 var Book = { Name: '法', Price: 100, Discount : functi ...
- js中with的作用
js中with的作用当一个对象有多个需要操作的属性或方法时,可以使用如<体>试验<script type=“text/javascript”>var o=文件.创建元素(“DI ...
- js中constructor和prototype
在最开始学习js的时候,我们在讲到原型链和构造函数的时候经常会有一个例子 如果我们定义函数如下: function Foo() { /* .. */ } Foo.prototype.bar = fun ...
- JS中constructor与prototype关系概论
在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下: 我们都知道,在JS中有一个function的东西. ...
- js中return的作用及用法
这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事件中调用函数 ...
- vue.js中created方法作用
这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...
- JS 、JQ 获取宽高总结 & JS中getBoundingClientRect的作用及兼容方案
1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位置集合. 执行 object.getBoundingClien ...
- JS中constructor,prototype
First: this this定义: this就是函数赖以执行的对象. 分析这句话: 1. this是对象. 2. this依赖函数执行的上下文环境. 3. this存在函数中. 直接看例子: al ...
随机推荐
- C语言初学 比较五个整数并输出最大值和最小值2
#include <stdio.h> int main() { int i,a[5]; int max = 0,min = 0; printf("输入5个整数(空格隔开) :\n ...
- vim 折叠代码技巧汇总
以下命令输入的方式: 如zo命令,先按z键,松开后按o键即可展开折叠. 一.打开.关闭折叠 zo 展开折叠,只展开最外层的折叠. zO 对所在范围内所有嵌套的折叠点展开,包括嵌套折叠. zc 折叠,只 ...
- PhoneGap and Titanium
http://mobile.51cto.com/web-338270.htm http://www.udpwork.com/item/6117.html http://blog.cnbang.net/ ...
- FILTER 哪里没展开改哪里
SELECT * FROM F_PTY_INDIV_TMP O WHERE EXISTS (SELECT 1 FROM F_PTY_INDIV F WHERE O.PTY_ID = F.PTY_ID ...
- Android AutoCompleteTextView和MultiAutoCompleteTextView使用
Android AutoCompleteTextView和MultiAutoCompleteTextView的功能类似于百度或者Google在搜索栏输入信息的时候,弹出的与输入信息接近的提示信息: 它 ...
- Delphi 把字符串读到流中的操作。
var FReQuestM := TMemoryStream FReQuestM.Write(PChar(FcVoucherXML)^, Length(FcVoucherXML)); 这样就读到流中了 ...
- 关于Set Nocount ON的性能 |c#调用存储过程的返回值总是-1
原文地址:http://www.tuicool.com/articles/qe6BZbR 也许因为它太过于简单,自己一直没能好好关注这个语句,只记得"只是"提高点性能而已.有时会在存储过程中写上几句, ...
- Temporary failure in name resolution
公司搬家,在一台测试机上执行git clone,出现错误 ssh: Could not resolve hostname **: Temporary failure in name resolutio ...
- c++之命名空间namespace
1命名空间解决全局变量的冲突 main.h文件 #pragma once // data命名空间的名称 namespace data { ;//外部全局变量冲突 } main.cpp #include ...
- [hihocoder 1033]交错和 数位dp/记忆化搜索
#1033 : 交错和 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描写叙述 给定一个数 x,设它十进制展从高位到低位上的数位依次是 a0, a1, ..., an - 1 ...
