不得不看之JavaScript构造函数及new运算符

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中的继承，而不仅仅是实例化了一个对象！

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对我们的支持!

赞 (0)

相关推荐

  • JS中的构造函数详细解析

    在JavaScript中,任何合法的函数都可以作为对象的构造函数,这既包括系统内置函数,也包括用户自己定义的函数.一旦函数被作为构造函数执行,它内部的this属性将引用函数本身. 通常来说,构造函数没有返回值,它们只是初始化由this指针传递进来的对象,并且什么也不返回.如果一个函数有返回值,被返回的对象就成了new表达式的值.从形式上看,一个函数被作为构造函数还是普通函数执行的唯一区别,是否用new运算符. 上面的描述事实上有着更为精确的含义,这要把函数如果有返回值的情况分为函数的返回值是引用

  • 深入理解javascript构造函数和原型对象

    深入理解javascript构造函数和原型对象

    常用的几种对象创建模式 使用new关键字创建 最基础的对象创建方式,无非就是和其他多数语言一样说的一样:没对象,你new一个呀! var gf = new Object(); gf.name = "tangwei"; gf.bar = "c++"; gf.sayWhat = function() { console.log(this.name + "said:love you forever"); } 使用字面量创建 这样似乎妥妥的了,但是宅寂的

  • JavaScript构造函数详解

    JavaScript构造函数详解

    构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象. 构造函数注意事项: 1.默认函数首字母大写 2.构造函数并没有显示返回任何东西.new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型. 3.也可以在构造函数中显示调用return.如果返回的值是一个对象,它会代替新创建的对象实例返回.如果返回的值是一个原始类型,它会被忽略,新创建的实例会被返回. function Person( name){ this

  • 不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象

    JavaScript中的对象模型(object model)并不广为人知.我曾写过一篇关于他们的博客.之所以不被人所熟知,原因之一就是JavaScript是这些被人广泛使用的语言中唯一一个通过原型(prototype)来实现继承的.但是,我认为另一个原因就是这种对象模型非常复杂,难于解释.它为什么这么复杂并且又令人困惑呢?那是因为JavaScript试图去隐藏它传统的面向对象的特性--最终导致了它的双重人格(译者注:作者意思是JavaScript既有面向过程的特征,又有面向对象的特征). 我认为

  • JS特殊函数(Function()构造函数、函数直接量)区别介绍

    函数定义 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 函数的构造语法有这三种: Js代码 复制代码 代码如下: 1.function functionName(arg0, arg1, ... argN) { statements }//function语句 2.var function_name = new Function(arg1, arg2, ..., argN, function_body);//Function()构造函数 3

  • JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlo

  • 不得不看之JavaScript构造函数及new运算符

    JS中的函数即可以是构造函数又可以当作普通函数来调用,当使用new来创建对象时,对应的函数就是构造函数,通过对象来调用时就是普通函数. 普通函数的创建有:显式声明.匿名定义.new Function() 等三种方式. 当通过new来创建一个新对象时,JS底层将新对象的原型链指向了构造函数的原型对象,于是就在新对象和函数对象之间建立了一条原型链,通过新对象可以访问到函数对象原型prototype中的方法和属性. 和其他高级语言一样 Javascript 中也有构造函数和 new 运算符,我们知道

  • JavaScript构造函数与原型之间的联系

    JavaScript构造函数与原型之间的联系

    目录 一.构造函数和原型 1.构造函数 2.构造函数的问题 3.构造函数原型 prototype 4.对象原型 __proto__ 5.constructor 构造函数 6.构造函数.实例.原型对象三者之间的关系 7.JavaScript 的成员查找机制(规则) 8. 扩展内置对象 二.类的本质 一.构造函数和原型 1.构造函数 构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用.我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面.

  • 详解JavaScript的表达式与运算符

    JavaScript脚本语言描述了一组用于操作数据值的运算符,包括一元运算符,布尔运算符,算术运算符,关系运算符,三元运算符,位运算符和赋值运算符.        表达式是JavaScript语言的一个"短语",包含变量名(或字面量)和运算符.最简单的表达式时字面量或变量名.当然也有合并简单的表达式来创建复杂的表达式. 一.一元运算符 (1)递增++和递减-- var box1=100; ++box1;//相当于box=box+1 document.write("box1=&

  • Javascript 按位左移运算符使用介绍(<<)

    按位左移运算符 (<<)左移表达式的位. result = expression1 << expression2 参数result 任何变量. expression1 任何表达式. expression2 任何表达式. 说明<< 运算符把 expression1 的所有位向左移 expression2 指定的位数.例如: var temptemp = 14 << 2变量 temp 的值为 56,因为 14 (即二进制的 00001110)向左移两位等于 56

  • JavaScript中使用Spread运算符的八种方法总结

    Spread运算符 允许从 iterable 表达式(如另一个数组文本)初始化部分数组文本,或允许表达式扩展到多个参数(在函数调用中). 语法 var array = [[arg0ToN ,] ...iterable [, arg0ToN]] func([args ,] ...iterable [, args | ...iterable]) 参数 iterable 必需. 迭代对象. arg0ToN 可选. 数组文本的一个或多个元素. args 可选. 函数的一个或多个参数. 本文将带大家了解如

  • 一文秒懂JavaScript构造函数、实例、原型对象以及原型链

    1概述 ES6, 全称 ECMAScript 6.0 ,2015.06 发版.在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和它们的特征. 2构造函数 构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用.我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面. // 利用构造函数创建对象 function Person(uname, age) { this.uname = uname; this.age

  • JavaScript ES6解构运算符的理解和运用

    目录 前言 解构符号的作用 使用方法 解构赋值的应用 浅谈应用 提取json数据 可扩展运算符... 交换变量值 总结 前言 最近一直在学JavaScript,看到了ES6中的解构符号,觉得这个给我们的代码简洁性带来了一个飞跃式的提升,而且它已经运用在了企业开发中,假如未来你工作中,别人在用,你却读不懂别人的代码,这造成的影响还是很大的.因此,好好学习一下吧. 你可以不用,但是你不能不懂✔ JavaScript ES6中,有很多特性都是为了简化代码,方便程序员去书写的.解构运算符就是其中很好的特

  • C++构造函数+复制构造函数+重载等号运算符调用

    目录 前言: 1.赋值和初始化的区别 2.初始化和赋值分别调用哪个函数? 3.编写测试类 前言: 初学C++发现了下面这个问题,其中Duck是一个已知的类,并以多种方式指定对象的值: Duck d1(); Duck d2(d1); Duck d3 = d1; Duck d4; d4 = d1; 问题在于,上述d1.d2.d3.d4是如何创建的呢?分别调用的哪个函数呢? 1.赋值和初始化的区别 C++中,赋值和初始化是两个不同的概念: 初始化是指对象创建之时指定其初值,分为直接初始化和复制初始化两

  • 浅谈javascript构造函数与实例化对象

    前言--讲在前面 我想有很多以前很少接触后台编程语言的初学者朋友跟我一样,对javascript里面一系列的"名词"搞的一头雾水.好像大概知道讲的是什么,但其实理解的还是不清楚:我想,学习任何一种知识,首当其冲应该把最基本的名词解释搞清楚(知道它讲的到底是什么,有助于我们更好的理解它.)即知其然知其所以然,这样对以后的进阶学习是很有帮助的.下面的简单讲一下我自己对这样一些看似不重要但又不得不清楚的知识点的理解.(若有出入,欢迎指正) 1.什么是构造函数 构造函数 ,是一种特殊的方法.主

  • Java EE项目中的异常处理总结（一篇不得不看的文章）

    为什么要在J2EE项目中谈异常处理呢?可能许多java初学者都想说:"异常处理不就是try-.catch-finally吗?这谁都会啊!".笔者在初学java时也是这样认为的.如何在一个多层的j2ee项目中定义相应的异常类?在项目中的每一层如何进行异常处理?异常何时被抛出?异常何时被记录?异常该怎么记录?何时需要把checked Exception转化成unchecked Exception ,何时需要把unChecked Exception转化成checked Exception?异

随机推荐