详解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 操作XML入门
Dec 25 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 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的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
js 调用百度分享功能
2017/02/27 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
VUE 使用中踩过的坑
2018/02/08 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
2014年教师节国旗下讲话稿
2014/09/10 职场文书
小学运动会报道稿
2014/10/04 职场文书
降价通知函
2015/04/23 职场文书
死亡诗社观后感
2015/06/05 职场文书
美容院员工规章制度
2015/08/05 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
一条慢SQL语句引发的改造之路
2022/03/16 MySQL