再看原型对象

来源:互联网 发布:网络终端机服务器软件 编辑:程序博客网 时间:2024/05/28 17:04

今天重看原型对象,记录下自己的理解

看下面的代码,

function foo3(name,age,job) {    this.name = name    this.age = age    this.job = job    this.sayname = function () {        console.log(this.name)    }}var f1 = new  foo3("myName1",18,"myJob1")f1.sayname()var f2 = new  foo3("myName2",18,"myJob2")f2.sayname()console.log(  f1.name==f2.name, f1.sayname == f1.sayname )


console.log(  f1.name==f2.name, f1.sayname == f1.sayname )输出结果是false,false。为什么f1.sayname == f1.sayname输出也是false呢,因为js里函数也是对象

我们每新建一个实例就会新建一个name,job,age,sayname对象,如下图


这样造成了一个不好的情景,对于sayname()我们只是输出name值,不同的实例是不需要重新建立sayname对象的。

让所有实例共享方法可以采用prototype模式,如下

function foo3(name,age,job) {    this.name = name    this.age = age    this.job = job}foo3.prototype.sayname = function () {    console.log(this.name)}var f1 = new  foo3("myName1",18,"myJob1")f1.sayname()var f2 = new  foo3("myName2",18,"myJob2")f2.sayname()console.log(  f1.name==f2.name, f1.sayname == f2.sayname )

最后输出的是false,true.

下面对上述代码解释下,请看下图


在查找某对象的属性时,先去查找对象实例本身是否具有同名属性,如果有同名属性则返回对象实例同名属性的值,

如果没有则查找原型上是否有同名属性,如果找到了则返回原型上的同名属性。

对于上述代码,f1.sayname.我们的f1对象实例上没有名为sayname属性,于是去原型上查找,发现foo3.prototype上有名为sayname的属性,于是乎上述将这个函数

function () {    console.log(this.name)}

给了f1.sayname.

f1.sayname = function(){

console.log(this.name)

}

调用f1.sayname( ),一般this谁调用谁绑定,于是输出this.name就输出了myName1

参考js高级教程

effective js