在学习过程中对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
运算符会产生以下步骤:

  1. var obj={}; 也就是说,初始化一个对象obj。
  2. obj.__proto__=a.prototype;
  3. 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的作用的更多相关文章

  1. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  2. JS中冒号的作用

    JS中冒号的作用1.声明对象的成员2.switch语句分支3.三元表达式 1.声明对象的成员 var Book = { Name: '法', Price: 100, Discount : functi ...

  3. js中with的作用

    js中with的作用当一个对象有多个需要操作的属性或方法时,可以使用如<体>试验<script type=“text/javascript”>var o=文件.创建元素(“DI ...

  4. js中constructor和prototype

    在最开始学习js的时候,我们在讲到原型链和构造函数的时候经常会有一个例子 如果我们定义函数如下: function Foo() { /* .. */ } Foo.prototype.bar = fun ...

  5. JS中constructor与prototype关系概论

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

  6. js中return的作用及用法

    这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事件中调用函数 ...

  7. vue.js中created方法作用

    这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...

  8. JS 、JQ 获取宽高总结 & JS中getBoundingClientRect的作用及兼容方案

    1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位置集合.   执行 object.getBoundingClien ...

  9. JS中constructor,prototype

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

随机推荐

  1. 阿里云服务器上架设apache php mysql 环境

    由于朋友一公司要做企业站,于是就买了阿里云的服务器.买完进去发现iptables 和selinux默认就是关掉的,可能是因为阿里云有云盾就可以不用自带的防火墙吧,具体配置过程如下(我边配边记录的): ...

  2. linux pc syncy安装问题

    linux pc 上安装syncy遇到的坑 pycurl安装可以指定curl-config,这个是根据自己机器libcurl安装位置确定,不在默认位置时要指定:python setup.py inst ...

  3. c语言,全局变量,局部变量,外部函数,内部函数,stasic和extern的复习总结

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  4. centos6 安装 lamp

    首先更新一下yum -y update 安装Apache yum install httpd httpd-devel 安装完成后,用/etc/init.d/httpd start 启动apache 设 ...

  5. Leetcode_Best Time to Buy and Sell Stock

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  6. Qt浅谈之二十七进程间通信之QtDBus

    一.简介 DBus的出现,使得Linux进程间通信更加便捷,不仅可以和用户空间应用程序进行通信,而且还可以和内核的程序进行通信,DBus使得Linux变得更加智能,更加具有交互性.        DB ...

  7. Activity切换效果(overridePendingTransition)

    在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下如何实现左右滑动的切换效果,首先了解一下Activity切换的实现,从Android2.0开始在Activity ...

  8. Linux下的文件查找类命令(转载)

    如何快速有效的定位文件系统内所需要查找的文件呢?Linux为我们提供了一些文件查找类的命令,我们需要掌握以下几个命令: http://blog.csdn.net/sailor201211/articl ...

  9. IEEE论文格式要求

    0.特别提示:本次会议要求各位作者根据审稿意见进行认真修改,然后经过大会主席的检查合格才允许上传IEEE eXpress,主要的目的是为了保证论文集的质量,不让论文格式出现五花八门的情况,确保会议后被 ...

  10. Shiro学习详解

    1.Shiro基本架构 一.什么是Shiro Apache Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理等功能: 认证 - 用户身份识别,常被称为用户“登录”: 授权 ...