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

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

基础部分

构造函数本质上就是一个使用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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

es6 函数的扩展

我们都知道声明函数可以设置形参,但你有没有想过形参也可以直接设置默认值,我们接下来看看如何去写,rest 参数官方注解:ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。

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

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

JavaScript 函数式编程导论

近年来,函数式编程(Functional Programming)已经成为了JavaScript社区中炙手可热的主题之一,无论你是否欣赏这种编程理念,相信你都已经对它有所了解。即使是前几年函数式编程尚未流行的时候

ES6新特性之箭头函数与function的区别

写法不同;在function中,this指向的是调用该函数的对象;而在箭头函数中,this永远指向定义函数的环境。箭头函数不可以当构造函数;function存在变量提升,可以定义在调用语句后;箭头函数以字面量形式赋值,是不存在变量提升的;

js中函数表达式和自执行函数表达式的用法总结

立即调用函数表达式:给函数体加大括号,在有变量声明的情形下,没有任何区别.但是,如果只是【自动执行】的情形下,就会不同,因为,一个匿名函数,不赋值或函数体不加小括号,是不能自动执行的

云函数

云函数提供了一种 直接在云上运行,无状态的、短暂的、由事件触发的代码 的能力。ServerLess,即无服务器架构,也叫轻服务,它包含两个部分,如下:

让我们来创建一个JavaScript Wait函数

Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下,回调编程已经成为过去的事情。当然,基于回调的编程很丑陋的。

js中reduce()方法

reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(上一次回调的返回值),当前元素值,当前索引,原数组。

js之惰性函数

惰性函数是js函数式编程的另一个应用,惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,他的应用情景在于当我们遇到一个需要判断场景去调用不同的方法时,避免重复进入函数内的if判断,也就是说if判断只进行一次,之后函数就会被分支里的代码替换掉

JavaScript中的构造函数

ECMAScript 中,构造函数与其他函数的唯一区别,就在于调用它们的方式不同。不过,构造函数毕竟也是函数,不存在定义构造函数的特殊语法。任何函数,只要通过 new 操作符来调用

点击更多...

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