详解javascript new的运行机制


Posted in Javascript onJanuary 26, 2016

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

一、认识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.height //undefined
  );
  cat.say(); //I'm cat

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

如果你能理解上面输出的结果,说明你已非常了解js中new和this的运行机制,请忽略本文!

我们将通过解析这个例子来加深你对js中new运算符的理解! 【如果你对js的this还不了解,请先阅读:JS作用域和this关键字】

1、代码解读

  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方法。

2、重点解析

  第8行代码是关键:

var cat = new Animal("cat");
JS引擎执行这句代码时,在内部做了很多工作,用伪代码模拟其工作流程如下:

new Animal("cat") = {

  var obj = {};

  obj.__proto__ = Animal.prototype;

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

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

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

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

      【如果你不了解JS原型链,请先阅读:JS原型和原型链】

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

       当这句执行完之后,obj便产生了属性name并赋值为"cat"。【关于JS中call的用法请阅读:JS的call和apply】

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

理解new的运行机制以后,我们知道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的原型链是什么呢?

详解javascript new的运行机制

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

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

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

二、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的实例对象。

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

Javascript 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 #Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 #Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 #Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 #Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 #Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 #Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 #Javascript
You might like
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
各种快递查询--Api接口
2016/04/26 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Python 实现一个计时器
2020/07/28 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
进修护士自我鉴定
2013/10/14 职场文书
行政管理专业求职信
2014/07/06 职场文书
人力资源管理求职信
2014/08/07 职场文书
村创先争优活动总结
2014/08/28 职场文书
单位单身证明样本
2014/10/11 职场文书
教师工作能力自我评价
2015/03/04 职场文书
立春观后感
2015/06/18 职场文书