不得不看之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 相关文章推荐
基于jquery的3d效果实现代码
Mar 23 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
js实现异步循环实现代码
Feb 16 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 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基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
javascript radio 联动效果
2009/03/04 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
shiro授权的实现原理
2017/09/21 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
JavaScript继承与多继承实例分析
2018/05/26 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
vue-router命名视图的使用讲解
2019/01/19 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
Python实现单词拼写检查
2015/04/25 Python
python中__slots__用法实例
2015/06/04 Python
详解python单例模式与metaclass
2016/01/15 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
专科应届生求职信
2013/11/24 职场文书
高中校园广播稿
2014/01/11 职场文书
会计辞职信范文
2014/01/15 职场文书
优秀家长事迹材料
2014/05/17 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
2016年校长新年寄语
2015/08/17 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python