javascript中new关键字详解


Posted in Javascript onDecember 14, 2015

和其他高级语言一样javascript中也有new关键字,我们以前认知的new是用来创建一个类的实例对象,但在js中万物皆是对象,为何还要new关键字呢,其实js中new关键字不是用来创建一个类的实例对象,而是用于继承。 接下来,本文将带你一起来探索JS中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-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方法。

二、重点解析

  第8行代码是关键:

var cat = new Animal("cat");

 JS引擎在执行这句代码时,做了很多工作,用伪代码模拟其工作流程如下:

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的原型链是:obj->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方法!

 总结一下,javascript的new关键字主要的作用是继承,上面例子中,cat对象在产生时便继承了Animal中定义的方法和属性,因此cat不是Animal的实例而是其子类(不严谨的说法)。可能有人还会想:cat既然是new出来的,那cat和Animal应该是同类型的。我认为既然是父类和子类的关系,那就不可能是同类型,不信,你看:

javascript中new关键字详解

javascript 使用new关键字的区别

第一种方式使用new关键字以原型的方式将user对象暴露到window对象中

//one
var user = function(){
  this.name="";
  this.id="";
};
user.add = function(){
  console.log("add");
};
user.delete = function(){
  console.log("delete");
};
user.prototype = user;
window.user = new user();

第二种方式不使用new关键字直接将user对象暴露到window对象中

//two
var user = {
  name:"",
  id:""
};
user.add = function(){
  console.log("add");
};
user.delete = function(){
  console.log("delete");
};
window.user = user;

使用

<button onclick="user.add()">增加</button>
<button onclick="user.delete()">删除</button>
Javascript 相关文章推荐
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
JS正则表达式验证中文字符
May 08 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 #Javascript
Position属性之relative用法
Dec 14 #Javascript
CSS中position属性之fixed实现div居中
Dec 14 #Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 #Javascript
js实现拖拽效果(构造函数)
Dec 14 #Javascript
jQuery滚动加载图片实现原理
Dec 14 #Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 #Javascript
You might like
用 php 编写的日历
2006/10/09 PHP
php中cookie的使用方法
2014/03/29 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
python批量同步web服务器代码核心程序
2014/09/01 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
在python中修改.properties文件的操作
2020/04/08 Python
如何基于python实现不邻接植花
2020/05/01 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
大学生学习2014全国两会心得体会
2014/03/13 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书