javascript中关于new的理解

stackvoid 发布于2019-08-19 17:21 / 2511人阅读

摘要：中，实例化一个对象，会用到关键字。这里再解释一下构造函数我们一般把后面的函数称为构造函数，如，其中就为构造函数第四点的，可能比较难理解。有点需要注意如果构造函数内没有返回值，则默认是返回当前上下文，要不然就返回任意非原始类型值。

Javascript中，实例化一个对象，会用到new关键字。

经常有人会问对于一个函数，什么时候该使用new关键字。

在回答这个问题之前，需要先了解清楚new的本质，在调用new Function的时候，new做了什么操作。

先看如下代码：

// 定义类 类名字是 classA
function classA(){
    this.name=1;
}
classA.prototype.show = function(){
    alert(this.name);
};
// 用new实例化
var b = new classA();
b.show();

var b = new classA();

这句中，new做了以下几件事情。
1、创建一个新的对象，这个对象的类型是object；
2、查找class的prototype上的所有方法、属性，复制一份给创建的Object
3、将构造函数classA内部的this指向创建的Object
4、创建的Object的__proto__指向class的prototype
5、执行构造函数class
6、返回新创建的对象给变量b

这个流程应该比较好理解的。这里再解释一下：
1、构造函数：我们一般把new 后面的函数称为构造函数，如new classA()，其中classA就为构造函数
2、第四点的__proto__，可能比较难理解。
每个对象都会在其内部初始化一个属性，就是__proto__，可以在chrome中的调试器里写个对象查看下。当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去__proto__里找这个属性，这个__proto__又会有自己的__proto__，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

当我们调用b.show()时，首先b中没有show这个属性，于是，它就需要到它的__proto__中去找，也就是ClassA.prototype，
而我们在上面定义了ClassA.prototype.show=function(){}; 于是，就找到了这个方法。

再用下面的代码来理解

var b = {}
b.__proto__ =  ClassA.prototype
ClassA.call(b)

最后再用一句话总结：new关键字以ClassA()为模板创建了一个新的对象，它复制了ClassA构造器中的所有成员变量，同时this指向新创建的对象。

有2点需要注意：
1、如果构造函数内没有返回值，则默认是返回this（当前上下文），要不然就返回任意非原始类型值。
2、如果不用new关键字，如

var b = classA();

则classA值会返回undefined，并且this（执行上下文)是window对象。
也就是说如果你不new的话，this指的就是window全局对象了。
如果要理解这点，需要理清楚this的指向。

this的指向：
1、总的来说，this在函数内部使用，用来引用包含函数的对象，而不是函数本身。
2、当this值的宿主函数被封装在另一个函数的内部或在另一个函数的上下文中被调用时，this值将永远是对head对象的引用（即全局window对象）
3、使用new关键字调用构造函数时，this引用“即将创建的对象”

如下面代码：

// 定义类 类名字是 classA
function classA(){
    this.name=1;
}
//执行classA
classA();
//看下name是undefined还是1
name //返回1

看到这里，相信绝大多数人应该都理解了new的用法了。

云服务器 GPU云服务器 php中关于的运算 javascript理解如何理解javascript 深入理解javascript

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78447.html

Chrome开发者工具中关于“Deferred long-running timer task(s)

摘要：在文本输入框中过滤的字段中输入在列表中查找总时间超过毫秒的定时器函数。当浏览器在处理用户的手势的情景下，定时器函数执行超过毫秒也会触发该消息英文原文如果阅读中文后还无法理解可以参考英文截图原文地址：http://stackoverflow.com/questions/37367200/what-is-the-deferred-long-running-timer-tasks-warn...

omgdog 2019-08-21 10:55 评论0 收藏0
【关于Number】JavaScript中关于Number的操作

摘要：字符串与数字间的转换结果结果结果结果注意会把一个类似于的字符串强制转换成判断是否为有效的数字某些方法如会返回一个特殊的值请注意第点中的注意此方法不完全适合判断一个字符串是否是数字型小数转整数结果四舍五入结果返回大于的最小整数结果返回小于的最 1.字符串与数字间的转换 var i = 1; var str = i.toString(); //结果: 1 var str...

zhaofeihao 2019-08-21 11:34 评论0 收藏0
《你不知道的javascript》中关于this的记录

摘要：使用调用函数时，会自动执行以下操作创建一个全新的对象该对象会被执行连接该对象会绑定到函数调用的若函数没有返回其他对象，表达式中的函数调用会自动返回该对象。使用this可以减少传入上下文对象，可以隐式传递一个对象引用。使API简洁而复用，可以自动引用合适的上下文对象。【要注意的几个点】 1. this不一定指向自身； 2. this不一定指向函数作用域（因为作用域无法通过js代码访...

tommego 2019-08-21 17:31 评论0 收藏0
再谈Javascript原型继承

摘要：原型继承基本模式这种是最简单实现原型继承的方法，直接把父类的对象赋值给子类构造函数的原型，这样子类的对象就可以访问到父类以及父类构造函数的中的属性。真正意义上来说Javascript并不是一门面向对象的语言，没有提供传统的继承方式，但是它提供了一种原型继承的方式，利用自身提供的原型属性来实现继承。Javascript原型继承是一个被说烂掉了的话题，但是自己对于这个问题一直没有彻底理解...

ThinkSNS 2019-08-21 10:21 评论0 收藏0