读《js高级程序设计》问题？

Question

第六章：在创建对象的方式中有这样一种动态原型模式

function Persion() {
    this.name="wyq";
    this.friends=["a", "b", "c"];
    //下面的代码有什么意义??? 每次new一个对象的时候肯定要执行里面的函数啊
    if(typeof this.sayName !=="function"){
        this.sayName = function () {
            console.log("friends",this.friends);
        }
    }
}

直接这样写不就好了吗？

function Persion() {
    this.name="wyq";
    this.friends=["a", "b", "c"];
}
Persion.prototype = {
    sayName: function () {
        console.log("this.name", this.name);
    },
};

Answer 1

一段代码的作用要看使用环境,一个功能的实现可能有很多种写法

下面的写法是我们最常见也是最常用的，那么上面的代码和下面的代码有什么区别呢？

区别就是上面的代码，sayName属性是作用在子对象上的，而下面的代码是作用在父对象上的

上面的代码如果修改一下

function Persion(hasSayName) {
    //...
    if(hasSayName && typeof this.sayName !=="function"){
        //...
    }
}
var p1 = new Persion
var p2 = new Persion(true)

这样，代码的用意就特别清晰了

Answer 2

其实呢，双方的目的就是创建个对象后，实例拥有sayName()的能力

区别在哪里呢：
这种方式创建的sayName是在new Persion实例后,在实例上创建的

function Persion() {
    this.name="wyq";
    this.friends=["a", "b", "c"];
    //下面的代码有什么意义??? 每次new一个对象的时候肯定要执行里面的函数啊
    if(typeof this.sayName !=="function"){
        this.sayName = function () {
            console.log("friends",this.friends);
        }
    }
}

这种方式创建的sayName是在Persion构造函数上直接创建的

function Persion() {
    this.name="wyq";
    this.friends=["a", "b", "c"];
}
Persion.prototype = {
    sayName: function () {
        console.log("this.name", this.name);
    },
};

总结一下：一个在实例上创建，一个在构造函数上创建