Javascript中的constructor与prototype

在学习javascript面向对象编程的过程中, constructor和prototype一直让我觉得理解不透,慢慢的学习过程中记录自己的理解,加深印象,故写下此篇。

首先来看一个例子:

  1. function Person(name) {
  2. this.name = name;
  3. this.showName = function() {
  4. console.log(this.name);
  5. }
  6. }
  7. var student = new Person("COCO");
  8. student.showName();//COCO
  9. console.log(student.prototype);//undefined
  10. console.log(Person.prototype);//Object {constructor: function}
  11. console.log(Person.prototype.constructor);//function Person(name){...}

在之前的文章中有提到:使用function定义的对象与使用new操作符生成的对象之间有一个重要的区别,就是function定义的对象有一个prototype属性,使用new生成的对象就没有这个prototype属性,因此student对象并没有prototype属性。

我们来分析student对象的创建过程:

  1. 建立一个新的对象student
  2. 对象创建时存在预定义的属性,我们称之为内置原型对象,即__proto__,用新建student的内置原型对象指向构造函数的原型对象,即student.__proto__==Person.prototype
  3. 将新建对象student作为this参数调用构造函数(Person),即Person.call(student); 也就是说构造student,也可以称之为初始化student

通过student的内置原型对象,可以访问到Person的prototype对象中的任何属性与方法了,因为prototype对象中存在一个constructor属性,那么student也可以直接访问constructor属性。因此我们可以理解如下代码:

  1. console.log(student.constructor == Person.constructor)//false
  2. console.log(student.constructor == Person.prototype.constructor)//true
  3. console.log(Person.constructor==Function.prototype.constructor)//true
  4. //Person对象的构造函数是Function,因此Person对象的constructor指向Function.prototype的constructor

根据以上的结论,我们来分析如何通过原型链实现继承:

  1. function Father(name) {
  2. this.name = name;
  3. this.showName = function() {
  4. console.log(name);
  5. }
  6. }
  7. Father.prototype.home = function() {
  8. console.log("Shanghai");
  9. }
  10. function son() {}
  11. son.prototype = new Father();//继承实现的关键,将子类的prototype设置为父类的一个对象
  12. console.log(son.prototype.constructor); //function Father(name) {}
  13. var firstSon = new son();
  14. firstSon.home(); //Shanghai
  15. console.log(firstSon.constructor); //function Father(name) {}
  16. console.log(son.prototype.constructor); //function Father(name) {}
  17. console.log(firstSon.constructor == son.prototype.constructor); //true

根据以上代码,我们分析得到如下链条:

Javascript 原型链与constructor的更多相关文章

  1. JavaScript学习总结(十七)——Javascript原型链的原理

    一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中, ...

  2. 明白JavaScript原型链和JavaScrip继承

    原型链是JavaScript的基础性内容之一.其本质是JavaScript内部的设计逻辑. 首先看一组代码: <script type="text/javascript"&g ...

  3. 资料--JavaScript原型链

    JavaScript原型链 原文出处:https://www.cnblogs.com/chengzp/p/prototype.html 目录 创建对象有几种方法 原型.构造函数.实例.原型链 inst ...

  4. JavaScript原型链及其污染

    JavaScript原型链及其污染 一.什么是原型链? 1.JavaScript中,我们如果要define一个类,需要以define"构造函数"的方式来define: functi ...

  5. javascript原型链中 this 的指向

    为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = { d: 40 }; var a = { x: 10, calculate: function (z) ...

  6. Javascript 原型链资料收集

    Javascript 原型链资料收集 先收集,后理解. 理解JavaScript的原型链和继承 https://blog.oyanglul.us/javascript/understand-proto ...

  7. JavaScript原型链:prototype与__proto__

    title: 'JavaScript原型链:prototype与__proto__' toc: false date: 2018-09-04 11:16:54 主要看了这一篇,讲解的很清晰,最主要的一 ...

  8. JavaScript里的原型(prototype), 原型链,constructor属性,继承

    ① __proto__ 和 constructor 属性是 对象 所独有的. ② prototype 属性是 函数 所独有的. ** JS里函数也是引用类型的对象,所以函数也有 __proto__ 和 ...

  9. JavaScript的原型对象prototype、原型属性__proto__、原型链和constructor

    先画上一个关系图: 1. 什么是prototype.__proto__.constructor? var arr = new Array; 1. __proto__是原型属性,对象特有的属性,是对象指 ...

随机推荐

  1. 修改版Putty,可保持密码

    修改版Putty,可保持密码: http://files.cnblogs.com/findumars/putty_v6.0.rar 转自: http://unmi.cc/putty-auto-logi ...

  2. 【POI】T1 特工 szp

    T1 特工szp [问题描述] Byteotian 中央情报局 (BIA) 雇佣了许多特工. 他们每个人的工作就是监视另一名特工.Byteasar 国王需要进行一次秘密行动,所以他要挑选尽量多的信得过 ...

  3. Linux Centos 下安装软件 三种方式

    1)一种是软件的源代码,您需要自己动手编译它.这种软件安装包通常是用gzip压缩过的tar包(后缀为.tar.gz). 2)另一种是软件的可执行程序,你只要安装它就可以了.这种软件安装包通常被是一个R ...

  4. Flask中的ThreadLocal本地线程,上下文管理

    先说一下和flask没有关系的: 我们都知道线程是由进程创建出来的,CPU实际执行的也是线程,那么线程其实是没有自己独有的内存空间的,所有的线程共享进程的资源和空间,共享就会有冲突,对于多线程对同一块 ...

  5. bzoj1085 [SCOI2005]骑士精神——IDA*

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1085 搜索,IDA*,估价就是最少需要跳的步数: 代码意外地挺好写的,memcmp 用起来好 ...

  6. codeforces round #428 div2

    A:暴力模拟,能加就加,如果累计到了8就加上,每次累积 #include<bits/stdc++.h> using namespace std; int main() { ; scanf( ...

  7. Ubuntu下 VirtualBox的卸载和升级 (转载)

    转载:http://blog.csdn.net/li_hai/article/details/8164744 首先,在终端查看已经安装的VirtualBox的版本: $ dpkg -l 查看到版本号, ...

  8. Java setAccessible方法作用

    在Java中可以通过反射进行获取实体类中的字段值,当未设置Field的setAccessible方法为true时,会在调用的时候进行访问安全检查,会抛出IllegalAccessException异常 ...

  9. 在sql语句中使用关键字

    背景 开发过程中遇到了遇到了一句sql语句一直报错,看了一下字段名和表名都对应上了,但是还是一直报错 sql语句如下: update table set using = ""hh ...

  10. echart 参数 vue配置 图文展示

    https://blog.csdn.net/she_lover/article/details/51448967 https://blog.csdn.net/n_meng/article/detail ...