Javascript 原型链与constructor
Javascript中的constructor与prototype
在学习javascript面向对象编程的过程中, constructor和prototype一直让我觉得理解不透,慢慢的学习过程中记录自己的理解,加深印象,故写下此篇。
首先来看一个例子:
function Person(name) {
this.name = name;
this.showName = function() {
console.log(this.name);
}
}
var student = new Person("COCO");
student.showName();//COCO
console.log(student.prototype);//undefined
console.log(Person.prototype);//Object {constructor: function}
console.log(Person.prototype.constructor);//function Person(name){...}
在之前的文章中有提到:使用function定义的对象与使用new操作符生成的对象之间有一个重要的区别,就是function定义的对象有一个prototype属性,使用new生成的对象就没有这个prototype属性,因此student对象并没有prototype属性。
我们来分析student对象的创建过程:
- 建立一个新的对象student
- 对象创建时存在预定义的属性,我们称之为内置原型对象,即__proto__,用新建student的内置原型对象指向构造函数的原型对象,即student.__proto__==Person.prototype
- 将新建对象student作为this参数调用构造函数(Person),即Person.call(student); 也就是说构造student,也可以称之为初始化student
通过student的内置原型对象,可以访问到Person的prototype对象中的任何属性与方法了,因为prototype对象中存在一个constructor属性,那么student也可以直接访问constructor属性。因此我们可以理解如下代码:
console.log(student.constructor == Person.constructor)//false
console.log(student.constructor == Person.prototype.constructor)//true
console.log(Person.constructor==Function.prototype.constructor)//true
//Person对象的构造函数是Function,因此Person对象的constructor指向Function.prototype的constructor
根据以上的结论,我们来分析如何通过原型链实现继承:
function Father(name) {
this.name = name;
this.showName = function() {
console.log(name);
}
}
Father.prototype.home = function() {
console.log("Shanghai");
}
function son() {}
son.prototype = new Father();//继承实现的关键,将子类的prototype设置为父类的一个对象
console.log(son.prototype.constructor); //function Father(name) {}
var firstSon = new son();
firstSon.home(); //Shanghai
console.log(firstSon.constructor); //function Father(name) {}
console.log(son.prototype.constructor); //function Father(name) {}
console.log(firstSon.constructor == son.prototype.constructor); //true
根据以上代码,我们分析得到如下链条:
Javascript 原型链与constructor的更多相关文章
- JavaScript学习总结(十七)——Javascript原型链的原理
一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中, ...
- 明白JavaScript原型链和JavaScrip继承
原型链是JavaScript的基础性内容之一.其本质是JavaScript内部的设计逻辑. 首先看一组代码: <script type="text/javascript"&g ...
- 资料--JavaScript原型链
JavaScript原型链 原文出处:https://www.cnblogs.com/chengzp/p/prototype.html 目录 创建对象有几种方法 原型.构造函数.实例.原型链 inst ...
- JavaScript原型链及其污染
JavaScript原型链及其污染 一.什么是原型链? 1.JavaScript中,我们如果要define一个类,需要以define"构造函数"的方式来define: functi ...
- javascript原型链中 this 的指向
为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = { d: 40 }; var a = { x: 10, calculate: function (z) ...
- Javascript 原型链资料收集
Javascript 原型链资料收集 先收集,后理解. 理解JavaScript的原型链和继承 https://blog.oyanglul.us/javascript/understand-proto ...
- JavaScript原型链:prototype与__proto__
title: 'JavaScript原型链:prototype与__proto__' toc: false date: 2018-09-04 11:16:54 主要看了这一篇,讲解的很清晰,最主要的一 ...
- JavaScript里的原型(prototype), 原型链,constructor属性,继承
① __proto__ 和 constructor 属性是 对象 所独有的. ② prototype 属性是 函数 所独有的. ** JS里函数也是引用类型的对象,所以函数也有 __proto__ 和 ...
- JavaScript的原型对象prototype、原型属性__proto__、原型链和constructor
先画上一个关系图: 1. 什么是prototype.__proto__.constructor? var arr = new Array; 1. __proto__是原型属性,对象特有的属性,是对象指 ...
随机推荐
- QQ空间说说 视频播放
http://182.254.8.83/vwecam.gtimg.com/1006_d81d60f3c83844a5ad6a184149d4ccbb.f0.mp4?sha=78A27CF4908AB5 ...
- HTTP要点概述:七,编码,压缩传输,分块传输
一,编码: HTTP 在传输数据时可以按照数据原貌直接传输,但也可以在传输过程中通过编码提升传输速率.通过在传输时编码,能有效地处理大量的访问请求.但是,编码的操作需要计算机来完成,因此会消耗更多的 ...
- 编译android的一些坑
1 降级gcc g++到4.4 2 参考:http://source.android.com/source/initializing.html来配置环境 3 使用jdk1.6 包括 java java ...
- js二维数组定义和初始化的三种方法总结
js二维数组定义和初始化的三种方法总结 方法一:直接定义并且初始化,这种遇到数量少的情况可以用var _TheArray = [["0-1","0-2"],[& ...
- 【POI2004】【Bzoj2069】T2 洞穴 zaw
T2 洞穴zaw [问题描述] 在 Byte 山的山脚下有一个洞穴入口. 这个洞穴由复杂的洞室经过隧道连接构成. 洞穴的入口是 1 号点.两个洞室要么就通过隧道连接起来,要么就经过若干隧道间接的相连. ...
- bzoj4237 稻草人——分治
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4237 分治: 先把所有点按 y 排序,然后二分递归: 对于每个 mid ,计算经过它的矩形的 ...
- vue 简介
Vue.js是一套构建用户界面的渐进式框架.采用自底向上增量开发的设计.Vue的核心值关注视图层非常容易与其他库和已有的项目整合.另外,Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发复 ...
- navicat导入.sql文件出错2006-MySQLserver has gone away
方式一(验证无误): 找到mysql安装目录下的my.ini配置文件,加入以下代码: max_allowed_packet=500M wait_timeout=288000 interactive_t ...
- ipvs和ipvsadm
ipvs和ipvsadm ipvs:内核中的协议栈上实现 ipvs是LVS软件核心,是运行在LB上的,这是个基于ip层的负载均衡. ipvs的总体结构主要有ip包处理,负载均衡算法,系统配置和管理三个 ...
- sqlserver2005连接失败,不存在或拒绝访问
sqlserver2005连接失败,不存在或拒绝访问 启动tcp/ip连接的方法: 打开 /Microsoft SQL Server 2005/配置工具/目录下的SQL Server Configur ...