js中的new file_JS中的new操作符

一、什么是new？

众所周知，在JS中，new的作用是通过构造函数来创建一个实例对象。

像下面这样：(和普通函数不一样，当函数用作 构造函数 时，首字母一般要大写，以作区分。)

function Foo(name) {    this.name = name;}console.log("new Foo('mm')的类型：",typeof new Foo('mm')); // objectconsole.log("Foo的类型：",typeof Foo); // function

二、new经历了什么过程？

Foo明明只是一个函数，可是为什么new Foo()执行后会突然返回一个对象呢？

我们从结果出发可以推断出，既然返回了一个对象，那么这事肯定和对象有关系。

实际上new帮我们做了这样几件事：

帮我们创建了一个空对象，例如：obj；
将空对象原型的内存地址 __proto__ 指向函数的原型对象；(这里涉及到了 原型链 的知识)
利用函数的call方法，将原本指向window的绑定对象this指向了obj。(这样一来，当我们向函数中再传递实参时，对象的属性就会被挂载到obj上。)
利用函数返回对象obj。

三、new的过程分析

function Foo(name) {    this.name = name;    return this;}var obj = {};obj.__proto__ = Foo.prototype;// Foo.call(obj, 'mm');var foo = Foo.call(obj, 'mm');console.log(foo);

分析：

首先预编译，声明提升，解释执行。

执行时按照顺序来进行，

obj指向空对象；
obj的原型地址指向构造函数Foo的原型对象；
执行 Foo.call(obj, 'mm');this.name = name; 通过函数的 call方法 将this绑定到obj(也就是说this就是obj),实参mm传入构造函数Foo中，这样this.name = ‘mm’，那么obj.name = ‘mm’，也就是说name属性被挂载到obj对象上。return this; 就是return obj，这样obj这个对象就被返回出来了。
将结果赋值给变量foo。
打印结果。

四、总结

第三部分的代码直接用 new 构造函数 效果是相同的。

function Foo(name) {    this.name = name;}var foo = new Foo('mm');console.log(foo);

简而言之，new操作符帮我们做了四件事：

创建空对象；
空对象的原型指针指向构造函数的原型对象；
利用函数的call方法改变this指向，在空对象上挂载属性或方法；
返回对象。

js中的new file_JS中的new操作符相关推荐

html img调用js,html调用js变量如何在html中输出js文件中的变量
html页面代码中怎么调用js变量?html页面代码中怎么调用js变量,例如在html代码中插入js代码: a=取浏览你把index1.js 中的onReady 去掉,把index1.js改成 fu ...
html js文本框文字列出,js实现文本框中输入文字页面中div层同步获取文本框内容的方法...
这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下本文实例讲述了js实现文本框中输入文字页面中 ...
SpringMVC js如何获取后台model中的属性值
SpringMVC js如何获取后台model中的属性值 companylist 如何获取 var companylist="${companylist}"; 希望对你有所帮助个 ...
js中变量和jsp中java代码中变量互相访问解决方案
1.js变量获取jsp页面中java代码的变量值. 方法:var JS变量名 = <%=JAVA变量名 %> 2.java代码获取js变量的值. 说明:在JSP中:Java部分是在 ...
前端知识点总结——JS高级（持续更新中）
前端知识点总结--JS高级(持续更新中) 1.字符串什么是: 连续存储多个字符的字符数组相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...
js中onload和jQuery中的ready区别
js中onload和jQuery中的ready区别 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. ------>不能写多个(如果有多个,只会执行一个) $(do ...
Windows 8 HTML5/JS评论引发开发者群中的慌乱
为什么80%的码农都做不了架构师?>>> Windows 8 HTML5/JS Comment Causes Panic Among Developers Windows 8 HTM ...
js 浅拷贝直接赋值_JS中实现浅拷贝和深拷贝的代码详解
(一)JS中基本类型和引用类型 JavaScript的变量中包含两种类型的值:基本类型值和引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象. ...
js变量和java变量相等,js中变量和jsp中java代码中变量互相访问解决方案
1.js变量获取jsp页面中java代码的变量值. 方法:var JS变量名 = 我们常常会将js文件和jsp文件分开写,在js文件中,上面的方法似乎不管用了. 也可以通过变通的方法来解决: a.js ...

js中的new file_JS中的new操作符

二、new经历了什么过程？

三、new的过程分析

四、总结

js中的new file_JS中的new操作符相关推荐

最新文章

热门文章