不得不看之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 相关文章推荐
brook javascript框架介绍
Oct 10 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
js css自定义分页效果
Feb 24 Javascript
原生js实现选项卡功能
Mar 08 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 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面向对象之多态
2014/08/20 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
PHP实现的日历功能示例
2018/09/01 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
jQuery的slideToggle方法实例
2013/05/07 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
用Python配平化学方程式的方法
2019/07/20 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
童装店创业计划书
2014/01/09 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
2015团员个人年度总结
2015/11/24 职场文书
车辆挂靠协议书
2016/03/23 职场文书
python实现简单倒计时功能
2021/04/21 Python
利用js实现简单开关灯代码
2021/11/23 Javascript
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS