高级函数之作用域安全的构造函数

构造函数都知道。就是一个使用new操作符调用的函数。当使用new 调用时，构造函数内用到的this对象会指向新创建的对象实例。

function Person(name,age,job) {
    this.name = name;
    this.age = age;
    this.job = job;
}
let person = new Person('yk',27,'software Engineer')

上面这个例子中，Person构造函数使用this对象给三个属性赋值，name，age和job。问题时当没有new时候，直接调用，this会映射到全局window上面。创建一个作用域安全的构造函数可以解决这个问题。

function Person(name,age,job) {
    if(this instanceof Person) {
            this.name = name;
            this.age = age;
            this.job = job;
    } else {
        return new Person(name,age,job)
    }
}

eg2:

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; } } let rect = new Rectangle(5, 10); alert(rect.sides) //undefined 

由于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(); let rect = new Rectangle(5, 10); alert(rect.sides) //2 

扫码加群，每日更新一篇前端技术文章一起成长。

预览