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

更新日期: 2018-11-30阅读: 1688标签: 函数

基础部分

构造函数本质上就是一个使用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



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

JavaScript 函数式编程

我理解的 JavaScript 函数式编程,都认为属于函数式编程的范畴,只要他们是以函数作为主要载体的。

Js函数式编程,给你的代码增加一点点函数式编程的特性

给你的代码增加一点点函数式编程的特性,最近我对函数式编程非常感兴趣。这个概念让我着迷:应用数学来增强抽象性和强制纯粹性,以避免副作用,并实现代码的良好可复用性。同时,函数式编程非常复杂。

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

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

JavaScript函数创建的细节

如果你曾经了解或编写过JavaScript,你可能已经注意到定义函数的方法有两种。即便是对编程语言有更多经验的人也很难理解这些差异。在这篇博客的第一部分,我们将深入探讨函数声明和函数表达式之间的差异。

编写小而美函数的艺术

随着软件应用的复杂度不断上升,为了确保应用稳定且易拓展,代码质量就变的越来越重要。不幸的是,包括我在内的几乎每个开发者在职业生涯中都会面对质量很差的代码。这些代码通常有以下特征:

javascript回调函数的理解和使用方法(callback)

在js开发中,程序代码是从上而下一条线执行的,但有时候我们需要等待一个操作结束后,再进行下一步操作,这个时候就需要用到回调函数。 在js中,函数也是对象,确切地说:函数是用Function()构造函数创建的Function对象。

js调用函数的几种方法_ES5/ES6的函数调用方式

这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关。

JavaScript中函数的三种定义方法

函数的三种定义方法分别是:函数定义语句、函数直接量表达式和Function()构造函数的方法,下面依次介绍这几种方法具体怎么实现,在实际编程中,Function()构造函数很少用到,前两中定义方法使用比较普遍。

js在excel的编写_excel支持使用JavaScript自定义函数编写

微软 称excel就实现面向开发者的功能,也就是说我们不仅可以全新定义的公式,还可以重新定义excel的内置函数,现在Excel自定义函数增加了使用 JavaScript 编写的支持,下面就简单介绍下如何使用js来编写excel自定义函数。

js中的立即执行函数的写法,立即执行函数作用是什么?

这篇文章主要讲解:js立即执行函数是什么?js使用立即执行函数有什么作用呢?js立即执行函数的写法有哪些?

点击更多...

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