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

Posted bbqq1314

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高级函数之作用域安全的构造函数相关的知识,希望对你有一定的参考价值。

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

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

技术图片

 

以上是关于高级函数之作用域安全的构造函数的主要内容,如果未能解决你的问题,请参考以下文章

javascript中函数的3个高级技巧

javascript中函数的5个高级技巧

JS学习20(高级技巧)

js-JavaScript高级程序设计学习笔记19

学习第十三天(2019-11-26)

python高级之函数