构造函数的理解

229 阅读1分钟

1,构造函数使用的理解

function Foo(name, age) {
    this.name = name
    this.age = age
    this.fn = function(){}
    // return this //默认有这一行
}

当 new 一个实例的时候

var f1 = new Foo('zhangsan', 20)

实际的过程为

  1. 当以 new 关键字调用时,会创建一个新的内存空间,标记为 f1 的实例
  2. Foo 里面的 this 为一个空对象指向该内存
  3. 函数里面的属性和方法一一赋值
  4. 将 this return 回来

2,new一个对象的过程

function Person(name) {
    this.name = name
}
Person.prototype.getName = function(){
    return this.name;
}
var objectFactory = function() {
    var obj = new Object,                      //从Object.prototype上克隆一个空的对象
        Constructor = [].shift.call(arguments) //arguments调用数组的slice方法,删除数组第一项,
                                               并返回删除项

    obj._proto_ = Constructor.prototype      //所有的引用对象(数组,对象,函数),_proto_属性值
                                            指向它的构造函数的 " prototype "属性值

    var ret = Constructor.apply(obj, arguments) //obj指向Constructor,并传入参数
    return typeof ret === 'object' ? ret : obj  //确保构造器总是会返回一个对象
}var a = objectFactory(Person, 'rose')

console.log(a.name)       //输出:rose
console.log( Object.getPrototypeOf( a ) === Person.prototype ); // 输出:true

3,构造函数的扩展

var a1 = {} 其实是 var a1 = new Object()的语法糖
var a = [] 其实是 var a = new Array()的语法糖
function Foo(){} 其实是 var Foo = new Function()的语法糖

可以使用 instanceof 判断一个函数是否是一个变量的构造函数

原理是:例如上面的 a1 的 __proto__ 一层一层往上,能否对应到 Object.prototype