不得不看之JavaScript构造函数及new运算符


Posted in Javascript onAugust 21, 2017

JS中的函数即可以是构造函数又可以当作普通函数来调用,当使用new来创建对象时,对应的函数就是构造函数,通过对象来调用时就是普通函数。

普通函数的创建有:显式声明、匿名定义、new Function() 等三种方式。

当通过new来创建一个新对象时,JS底层将新对象的原型链指向了构造函数的原型对象,于是就在新对象和函数对象之间建立了一条原型链,通过新对象可以访问到函数对象原型prototype中的方法和属性。

和其他高级语言一样 Javascript 中也有构造函数和 new 运算符,我们知道 new 是用来实例化一个类,从而在内存中分配一个实例对象。 但在 Javascript 中,万物皆对象,为什么还要通过 new 来产生对象? 本文将带你一起来探索 Javascript 中 new 的奥秘…

1、认识new运算符

function Animal(name){
this.name = name;
}
 Animal.color = "black";
 Animal.prototype.say = function(){
console.log("I'm " + this.name);
 };
 var cat = new Animal("cat");

 console.log(
 cat.name, //cat
 cat.color //undefined
 );
 cat.say(); //I'm cat

 console.log(
 Animal.name, //Animal
 Animal.color //back
 );
 Animal.say(); //Animal.say is not a function

2、代码解读

1-3行创建了一个函数Animal,并在其this上定义了属性:name,name的值是函数被执行时的形参。

第4行在Animal对象(Animal本身是一个函数对象)上定义了一个静态属性:color,并赋值“black”

5-7行在Animal函数的原型对象prototype上定义了一个say()方法,say方法输出了this的name值。

第8行通过new关键字创建了一个新对象cat

10-14行cat对象尝试访问name和color属性,并调用say方法。

16-20行Animal对象尝试访问name和color属性,并调用say方法。

3、重点解析

第8行代码是关键:

var cat = new Animal("cat");

Animal 本身是一个普通函数,但当通过new来创建对象时,Animal就是构造函数。

JS引擎执行这句代码时,在内部做了很多工作,用伪代码模拟其工作流程如下:

new Animal("cat") = {

var obj = {};

obj.__proto__ = Animal.prototype;

var result = Animal.call(obj,"cat");

return typeof result === 'object'? result : obj;
}

(1)创建一个空对象obj;

(2)把obj的proto指向构造函数Animal的原型对象prototype,此时便建立了obj对象的原型链:obj->Animal.prototype->Object.prototype->null

(3)在obj对象的执行环境调用Animal 函数并传递参数“cat”。 相当于var result = obj.Animal(“cat”)。

(4)考察第3步返回的返回值,如果无返回值或者返回一个非对象值,则将obj返回作为新对象;否则会将返回值作为新对象返回。

理解了其运行机制以后,我们知道cat其实就是过程(4)的返回值,因此我们对cat对象的认知就多了一些:

cat的原型链是:cat->Animal.prototype->Object.prototype->null

cat上新增了一个属性:name

分析完了cat的产生过程,我们再看看输出结果:

cat.name -> 在过程(3)中,obj对象就产生了name属性。因此cat.name就是这里的obj.name

cat.color -> cat会先查找自身的color,没有找到便会沿着原型链查找,在上述例子中,我们仅在Animal对象上定义了color,并没有在其原型链上定义,因此找不到。

cat.say -> cat会先查找自身的say方法,没有找到便会沿着原型链查找,在上述例子中,我们在Animal的prototype上定义了say,因此在原型链上找到了say方法。

另外,在say方法中还访问this.name,这里的this指的是其调用者obj,因此输出的是obj.name的值。

对于Animal来说,它本身也是一个对象,因此,它在访问属性和方法时也遵守上述查找规则,所以:

Animal.color -> “black”

Animal.name -> “Animal” , Animal先查找自身的name,找到了name, 但这个name不是我们定义的name,而是函数对象内置的属性。

一般情况下,函数对象在产生时会内置name属性并将函数名作为赋值(仅函数对象)。

Animal.say -> Animal在自身没有找到say方法,也会沿着其原型链查找,话说Animal的原型链是什么呢?

从测试结果看:Animal的原型链是这样的:

Animal->Function.prototype->Object.prototype->null

因此Animal的原型链上没有定义say方法!

4、new存在的意义

认识了new运算符之后,我们再回到开篇提到的问题:JS中万物皆对象,为什么还要通过new来产生对象?

要弄明白这个问题,我们首先要搞清楚cat和Animal的关系:

通过上面的分析,我们发现cat继承了Animal中的部分属性,因此我们可以简单的理解:Animal和cat是继承关系。

另一方面,cat是通过new产生的对象,那么cat到底是不是Animal的实例对象? 我们先来了解一下JS是如何来定义“实例对象”的?

A instanceof B
如果上述表达式为true,JS认为A是B的实例对象,我们用这个方法来判断一下cat和Animal

cat instanceof Animal; //true
从执行结果看:cat确实是Animal实例,要想证实这个结果,我们再来了解一下JS中instanceof的判断规则:

var L = A.__proto__;
var R = B.prototype;
if(L === R)
return true;

如果A的proto 等价于 B的prototype,就返回true

在new的执行过程(2)中,cat的proto指向了Animal的prototype,所以cat和Animal符合instanceof的判断结果。

因此,我们认为:cat 是Animal的实例对象。

5、总结

在Javascript中, 通过new可以产生原对象的一个实例对象,而这个实例对象继承了原对象的属性和方法。因此,new存在的意义在于它实现了Javascript中的继承,而不仅仅是实例化了一个对象!

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

Javascript 相关文章推荐
firefox下frameset取不到值的解决方法
Sep 06 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
js的touch事件的实际引用
Oct 13 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
使用Ajax实现无刷新上传文件
Apr 12 Javascript
JavaScript实现简单图片轮播效果
Aug 21 #Javascript
Javascript中 toFixed四舍六入方法
Aug 21 #Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 #Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 #Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 #Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 #Javascript
JS实现身份证输入框的输入效果
Aug 21 #Javascript
You might like
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
ThinkPHP路由详解
2015/07/27 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
Javascript this 的一些学习总结
2012/08/31 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
Javascript继承机制详解
2017/05/30 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
整理Python 常用string函数(收藏)
2016/05/30 Python
python获取服务器响应cookie的实例
2018/12/28 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
Exception类的常用方法
2012/06/16 面试题
高分子材料与工程专业个人求职信
2013/12/15 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
特岗教师个人总结
2015/02/10 职场文书
先进工作者个人总结
2015/02/15 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript