JS高级编程5-作用域安全的构造函数
2015-06-18 16:55
861 查看
作用域安全的构造函数
构造函数其实是一个使用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
这时构造函数的作用域就很有用了。
相关文章推荐
- 理解Javascript_12_执行模型浅析
- JavaScript Number 对象 Javascript Array对象 Location 对象方法 String对象方法
- JS高级编程4-函数节流
- js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
- 理解Javascript_10_对象模型
- JS高级编程3-函数柯里化
- JavaScript深究系列 [一]
- JS高级编程2-使用高阶函数
- js中两个对象的比较
- JS高级编程2-使用高阶函数
- 文章标题
- javascript实现分页效果
- JS高级编程1-函数绑定
- js限制文本框只可以输入数字
- POJ 1062 最短路Dijstra
- js 日期格式转换
- JSP中文乱码的相关解决方案
- js输出一个字符串中出现次数最多的字符
- 【WEB】jsp向servlet传参中文乱码问题解决
- JS判断输入是否为空