如何写一个作用域安全的构造函数

时间: 2018-11-30阅读: 1046标签: 函数

基础部分

构造函数本质上就是一个使用new操作符调用的函数,使用new调用时,构造函数内用到的this对象会指向新创建的对象实例:

function Girlfriend(name, age, height) {
  this.name = name;
  this.age = age;
  this.height = height;
}

// 使用new操作符来分配这些属性
var girlfriend = new Girlfriend("Ying", 23, 170);

平时写变量时,如果因为失误忘记使用new操作符时,会造成一个糟糕的影响————因为this对象是在运行时绑定的,直接调用构造函数,this会映射到全局对象window上,导致错误对象属性的增加,增添不必要的变量到全局对象中:

var girlfriend = new Girlfriend("Ying", 23, 170);
console.log(window.name); // "Ying"
console.log(window.age); // 23
console.log(window.height); // 170

特别的,当你自己构造函数内的某些变量名与window变量名重名时(像一些常用变量名name、length等),对这些属性的偶然覆盖就很可能导致其他地方出错,并且这个bug还相当难找!  

在这种情况下构造一个作用域安全的构造函数就显得很有必要:

function Girlfriend(name, age, height) {
  // 首先确认this对象是正确类型的实例,
  // 如果不是就创建新的实例并返回
  if (this instanceof Girlfriend) { // 添加一个检查
    console.log('created');
    this.name = name;
    this.age = age;
    this.height = height;
  } else {
    console.log('new');
    return new Girfriend(name, age, height);
  }
}

var girlfriend1 = Girlfriend("Ying", 23, 170); // "new" "created"
console.log(window.name); // ""
console.log(girfriend1.name); // "Ying"

var girlfriend2 = new Girlfriend("Lin", 22, 165); // "created"
console.log(girfriend1.name); // "Lin"

girlfriend1背后构造函数先new了一个实例并返回实例(打印“new”),再对实例进行赋值(打印“created”)。
girlfriend2自己就先new了一个实例,直接对该实例进行赋值(只打印“created”)。

这样在任何情况下就都可以返回一个安全作用域的实例了。


进阶部分

使用上面添加一个检查的方法可以创建一个作用域安全的构造函数,但如果有的函数窃取该函数的继承且没有使用原型链,那这个继承将被破坏不生效:

function Bmi(sex, weight=1, height=1) { // ES6开始支持的默认值
  if (this instanceof Bmi) {
    this.sex = sex;
    this.weight = weight;
    this.height = height;
    this.getBmi = function() {
      return this.weight / (this.height ** 2);
    };
  } else {
    return new Bmi(sex);
  }
}

function People(height, weight) {
  Bmi.call(this, 'male');
  this.height = height;
  this.weight = weight;
}

var guy = new People(1.75, 68); // 单位是m和kg
console.log(guy.sex) // undefined

Bmi构造函数作用域是安全的,但People并不是。新创建一个People实例后,这个实例准备通过Bmi.call()来继承Bmi的sex属性,但由于Bmi的作用域是安全的,this对象并非是Bmi的实例,所以Bmi会先自己创建一个新的Bmi对象,不会把新的Bmi对象的值传递到People中去。

这样People中的this对象并没有得到增长,同时Bmi.call()返回的值也没有用到,所以People实例中就不会有sex、weight、height属性和getBmi()函数。

解决办法: 构造函数结合使用原型链或寄生组合:

function Bmi(sex, weight=1, height=1) {
  if (this instanceof Bmi) {
    this.sex = sex;
    this.weight = weight;
    this.height = height;
    this.getBmi = function() {
      return this.weight / (this.height ** 2);
    };
  } else {
    return new Bmi(sex);
  }
}

function People(height, weight) {
  Bmi.call(this, 'male');
  this.height = height;
  this.weight = weight;
}


People.prototype = new Bmi(); // 重点

var guy = new People(1.75, 68);
console.log(guy.sex) // "male"

这样写的话,一个People的实例同时也是一个Bmi的实例,所以Bmi.call()才会去执行,为People实例添加上属性和函数。


总结

当多个人一同构建一个项目时,作用域构安全函数就非常必要,对全局对象意外的更改可能就会导致一些常常难以追踪的错误,这和平常设置空变量和空函数一样避免因为其他人可能发生的错误而阻塞程序执行。

来源:https://www.cnblogs.com/hencins/archive/2018/11/30/10042752.html



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1455

你也许不知道的javascript高级函数

高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们。简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。例如Array.prototype.map,Array.prototype.filter,Array.prototype.reduce 都是一些高阶函数。

eval到底哪里不好?

为什么要少用eval?eval是 js 中一个强大的方法。都说eval == evil等于true,这篇文章将研讨eval的几个缺点和使用注意事项。

关于Javascript中的valueOf与toString

以上引申出对象数据的转换的问题:所有对象继承了两个转换方法:toString(): 它的作用是返回一个反映这个对象的字符串,valueOf():它的作用是返回它相应的原始值

js 中实现getter和setter函数方法,及运算符的特殊用法

javascript的大部分东西是简化了的。这里我们假设有一个student对象,并且我们用student.age来访问它的age属性,如果此时定义了age属性,我们就会得到它的值,如果没有,我们就会得到undefined

css中calc()函数

css3中函数:用于动态计算长度值。(注意事项:运算符前后都需要保留一个空格,例如:width: calc(100% - 10px));任何长度值都可以使用calc()函数进行计算;

Js函数表达和闭包

函数声明提升:函数可以先用,声明在下面自动给提到上面来,函数表达式=后面的是匿名函数,又叫拉姆达函数,他一般可以被用来当成值使用(可以用来return),函数自己调用自己就叫递归,没啥好说的。当函数赋值给另一个函数时会导致重新调用函数名称不同而调用失败

js常用方法大全_前端常用Js函数封装

这是我在实际开发中常用的一些Js函数方法,今天总结了一下,以便以后查询,有需要的小伙伴可以参考下。包括:加载js || css || style、获取url参数、本地存储、cookie操作【set,get,del】、Js获取元素样式【支持内联】

js函数常见的写法以及调用方法

本文详细的介绍了5种js函数常见的写法以及调用的方法,平时看别人代码的时候总是看到各种不同风格的js函数的写法。不明不白的,找了点资料,做了个总结,需要的小伙伴可以看看,做个参考

javascript replace高级用法

在前端与后台交互的时候我们通常都需要将后台传递的数据绑定到html中,这个绑定数据的方式我们通常是使用jQuery或者使用原生的innerHTML进行绑定,当然也可以使用artTemplate模板来绑定数据,那么artTemplate模板它绑定数据的原理是什么呢?其实它就是利用了replace()方法。

“回调函数”超难面试题!!

进来的小伙伴可以先自己思考一下 。对于还属于小白的我来说扫了一眼这些代码的反应是:这都是什么鬼?但是我也比较喜欢钻研~ 仔细看了第二眼的反应是:这回调函数也太回调了吧

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!