JS编程建议——77:推荐作用域安全的构造函数

简介: 77:推荐作用域安全的构造函数

建议77:推荐作用域安全的构造函数
构造函数其实是一个使用new运算符的函数。当使用new调用时,构造函数的内部用到的this对象会指向新创建的实例。
function Person(name, age, job) {

this.name = name;
this.age = age;
this.job = job;

}
var person = new Person("Nicholas", 34, 'software Engineer');
在没有使用new运算符来调用构造函数的情况下,由于该this对象是在运行时绑定的,因此直接调用Person()会将该对象绑定到全局对象window上,这将导致错误属性意外增加到全局作用域上。这是由于this的晚绑定造成的,在这里this被解析成了window对象。
解决这个问题的方案是创建一个作用域安全的构造函数。首先确认this对象是否为正确的类型实例,如果不是,则创建新的实例并返回。
function Person(name, age, job) {

//检测this对象是否是Person的实例
if(this instanceof Person) {
    this.name = name;
    this.age = age;
    this.job = job;
} else {
    return new Person(name, age, job);
}

}
如果使用的构造函数获取继承且不使用原型链,那么这个继承可能就被破坏。
function Polygon(sides) {

if(this instanceof Polygon) {
    this.sides = sides;
    this.getArea = function() {
        return 0;
    }
} else {
    return new Polygon(sides);
}

}
function Rectangle(width, height) {

Polygon.call(this, 2);
this.width = width;
this.height = height;
this.getArea = function() {
    return this.width * this.height;
};

}
var rect = new Rectangle(5, 10);
alert(rect.sides); //undefined
Rectangle构造函数的作用域是不安全的。在新创建一个Rectangle实例后,这个实例通过Polygon.call继承了sides属性,但由于Polygon构造函数的作用域是安全的,this对象并非是Polygon的实例,因此会创建并返回一个新的Polygon对象。
由于Rectangle构造函数中的this对象并没有得到增长,同时Polygon.call返回的值没有被用到,所以Rectangle实例中不会有sides属性。构造函数配合使用原型链可以解决这个问题。
function Polygon(sides) {

if(this instanceof Polygon) {
    this.sides = sides;
    this.getArea = function() {
        return 0;
    }
} else {
    return new Polygon(sides);
}

}
function Rectangle(width, height) {

Polygon.call(this, 2);
this.width = width;
this.height = height;
this.getArea = function() {
    return this.width * this.height;
};

}
//使用原型链
Rectangle.prototype = new Polygon();//还是不懂???????????
var rect = new Rectangle(5, 10);
alert(rect.sides); //2
这时构造函数的作用域就很有用了。

相关文章
|
29天前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
3天前
|
JSON JavaScript 前端开发
Node.js命令大全:让你的编程效率翻倍
探索Node.js常用命令!本文作者木头左带你了解文件操作:`ls`、创建/删除文件夹、复制/移动文件及读写文件内容。此外,还介绍了查看系统信息、CPU和内存详情的方法。一起提升Node.js开发效率![[1](https://mutouzuo.oss-cn-hangzhou.aliyuncs.com/my/mudouzuo1.png)]
Node.js命令大全:让你的编程效率翻倍
|
3天前
|
JavaScript
Vue.js中使用作用域插槽实现自定义表格组件
Vue.js中使用作用域插槽实现自定义表格组件
|
3天前
|
JavaScript
Vue.js中的作用域插槽有什么特点和应用场景
Vue.js中的作用域插槽有什么特点和应用场景
|
7天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的食品安全信息管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的食品安全信息管理系统附带文章和源代码部署视频讲解等
9 0
|
11天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的实验室安全考试系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的实验室安全考试系统附带文章和源代码部署视频讲解等
23 6
|
14天前
|
JavaScript Java 测试技术
基于ssm+vue.js的安全教育平台附带文章和源代码设计说明文档ppt
基于ssm+vue.js的安全教育平台附带文章和源代码设计说明文档ppt
16 1
|
17天前
|
JavaScript Java 测试技术
基于springboot+vue.js的编程训练系统附带文章和源代码设计说明文档ppt
基于springboot+vue.js的编程训练系统附带文章和源代码设计说明文档ppt
31 11
|
28天前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
|
29天前
|
JavaScript 前端开发 数据处理
掌握JavaScript中的二进制运算,提升你的编程技能!
掌握JavaScript中的二进制运算,提升你的编程技能!