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

Posted 2021-03-04 bbqq1314

构造函数都知道。就是一个使用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

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

 

预览