华山资源网

Javascript中构造函数要注意的一些坑
网络编程 2024/11/18 佚名
3 1

前言

最近在家看书：《你不知道的Javascript》，看到构造函数调用时会绑定this，就顺便打开控制台输了一些代码，详细测试了一下。

构造函数简单的讲，即定义出来专供new 式调用的函数。

如：

function A(b) {
 this.b = b || 'bbb';
}

然后你就可以通过new ，来构建一个 A 的实例：

var a = new A('B')

但是，一个首要的坑是，构造函数与一个普通函数并无不同，如果你故意不使用new，或忘记用new，都会得到奇怪的错误：

var aa = A('adadada');

这样调用，并不会显式地报错，但实际上隐患深埋：

  1. aa并不是A的实例，而变成了 undefined
  2. 多了一个名为 b 的全局变量，值是 ‘adadada'

这就是无new 调用构造函数的坑。

下面说其他的：

构造函数自身有返回值

比如：

function A(b) {
 this.b = b || 'bbb';
 return {b: '0000'};
}

这个时候，无论是否使用new来调用A，得到的结果都会相同，即得到一个普通对象：{b:'0000′}

当然，此时是否带 new 调用，还是有一个不同点的，即：不带new时，依然会莫名声明一个 叫 b 的全局变量。

既然，构造函数有显式返回值时，会代替默认应该返回的this，成为返回值，那么，是不是所有返回值都能覆盖this呢？

测试显式返回值

众所周知，函数都是有返回值的，只是如果没有 return，则会返回undefined.

那么，我就在构造函数里显式返回一个undefined，会怎么样？

var a = function (){this.b = 'b'; return undefined};
new a(); // {b:'b'}

显式返回一个 undefined ，并不能阻止构造函数式调用的默认行为。

下图是更多测试：

Javascript中构造函数要注意的一些坑

简单的总结：

显式的返回以下值：undefined, null, boolean, number等基础类型，并不会代替 new 式调用的默认行为。

但显式返回以下值：{},[],RegExp, Date, Function，均会代替 new 调用的默认返回值 this.

大家都看到了，后者，全都是 对象，是复杂类型。

随手一记

前面说过，本该进行 new 式调用的构造函数，被当作普通函数调用，那么，如果函数体中，有 this.x = xxx 这样的赋值语句，则会被赋值给全局对象（即 windows），从而变成一个全局变量。

原因相信大家都知道，而本书中也专门讲过：函数调用时，默认的this就是绑定至全局对象。

而本书还提到：如果函数体是严格模式，则不会绑定 this 至全局对象，如：

var a = function (){'use strict';this.b = 'b'; return /111/g};
a(); // 直接报错

因为严格模式下，默认的 this 指向 undefined

所以说，有两点要提一下：

  1. 严格模式真不错
  2. 如果你想声明一个构造函数，那么严格模式是非常必要的

总结

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

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com