详解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 一个图片切换的插件
Oct 09 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
JavaScript实现新年倒计时效果
Nov 17 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教程 预定义变量
2009/10/23 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php筛选不存在的图片资源
2015/04/28 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
python练习程序批量修改文件名
2014/01/16 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
美国Max仓库:Max Warehouse
2020/05/31 全球购物
总经理职责
2013/12/22 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
六查六看六改心得体会
2014/10/14 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
汇报材料怎么写
2014/12/30 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP