前端开发与javascript的prototype

app原型设计与前端开发|前端开发面试之原型链|web前端开发技术——html_css_javascript

javascript 代码

var girl = {
        name: “小美”
    };
    var boy = {
        name: “小帅”,
        pay: function () {
            console.log(“花了一千元”);
        }
    };
    Object.setPrototypeOf(girl, boy);
    girl.pay();

不幸的是,现实中的小帅很花心,养了小三儿:
javascript 代码

var girl = {
        name: ‘小美’
    };
    var boy = {
        name: ‘小帅’,
        pay: function () {
            console.log(‘花了一千元’);
        }
    };
    var mistress = {
        name: ‘小三’
    };
    Object.setPrototypeOf(girl, boy);
    Object.setPrototypeOf(mistress, boy);
    girl.pay();
    mistress.pay();

boy不仅成了小美的钱包,也成了小三的钱包。
这个例子想说明为什么有原型这个东西?
原型是一种委托关系,你可以委托我,别人也可以委托我。
因此我的存在是为了复用!
这是本文要说第一个事情。

接下来要说初学者容易犯迷糊的地方。
构造函数本文不会涉及。说的都是简单的。

1.为啥叫“原型”二字?
初学者觉得原型不好理解,prototype这个单词也是罪魁祸首。
以前的文章也说过这个事情。
某个小说的主人公是现实中的某人为原型的。
此“原型”就是我们这个prototype。
设计师的原型设计,也是我们这个prototype。
因此原型就是原始模型的意思。

也许克隆这个观点更能说明白。
javascript 代码

var you = {
        name: ‘高富帅’
 };
var anotherYou = Object.create(you);
console.log(you.name);

以你为原型克隆出另一个你。
注意上句子中的”原型”,不仅指prototype,也指原始模型的意思。
这里可以补充一下create的过程,用代码描述是
Object.create = function(proto) {
var o = {};
Object.setPrototypeOf(o, proto);
return o;
};
当然与另一个版本说的事情是一样的:
Object.create = function(proto) {
var F = function() {};
F.prototype = proto;
return new F();
};

2.this的问题
关于this的指向问题,有很多同学还是没搞透,尤其跟原型扯在一起时。
继续开头的故事,在那样的代码中,小美是不会发现小三的存在的。
我们给小帅搞个银行卡:
javascript 代码

var girl = {
        name: ‘小美’
    };
    var boy = {
        name: ‘小帅’,
        account: 5000,
        pay: function () {
            boy.account -= 1000;
            console.log(‘花了一千元’);
        }
    };
    var mistress = {
        name: ‘小三’
    };
    Object.setPrototypeOf(girl, boy);
    Object.setPrototypeOf(mistress, boy);
    girl.pay();
    mistress.pay();
    console.log(boy.account);
    console.log(girl.account);

这回小美,应该发现有所不对了。哈哈。
其中能打印girl的account的原因是,account属性对于girl来说,
她没有,但是老公(原型)有,就当她的用。上面代码用的是

boy.account -= 1000;
改成this再看看,
javascript 代码

var girl = {
name: “小美”
};
var boy = {
name: “小帅”,
account: 5000,
pay:function(){
this.account-=1000;
console.log(“花了一千元”);
}
};
var mistress = {
name: “小三”
};
Object.setPrototypeOf(girl, boy);
Object.setPrototypeOf(mistress, boy);
girl.pay();
mistress.pay();
console.log(boy.account);
console.log(girl.account);
console.log(girl.hasOwnProperty(“account”));

是否感觉很奇怪,boy的钱并没少??
那么我们就来看看到底是咋回事。
第一个问题this指向了谁?
gril.pay()调用pay,this指向girl(方法调用时,指向调用者)。
核心代码在于

this.account -= 1000;
等价于

this.account = this.account – 1000
上面不仅有写还有读。
读的过程,根据原型链查找原理,读到了boy的5000,
因为this指向gril,所以写,是写girl的account属性。
等价于如下的代码

girl.account = girl.account -1000。
从这个例子可以看出,一些不是共有的属性,还是不要放在prototype里面了。
prototype最好放一些共有方法,
比如:
javascript 代码

var girl = {
name: “小美”,
account: 5000
};
var boy = {
name: “小帅”,
pay:function(){
console.log(“花了一千元”);
this.account-=1000;
}
};
var mistress = {
name: “小三”
};
Object.setPrototypeOf(girl, boy);
Object.setPrototypeOf(mistress, boy);
girl.pay();
mistress.pay();
console.log(boy.account);
console.log(girl.account);

所以钱放在自己的手里比较保险。

3.利用Object.create创建实例?
原型里放共有方法这一点儿,想强调的尤其放的初始化方法:
javascript 代码

var Person = {
init:function(name){
this.name =name;
},
sayName:function(){
console.log(this.name);
}
};
var me = Object.create(Person);
me.init(“laoyao”);
me.sayName();

关于用这种方式来创建实例,也未尝不可,之前也写过一篇这样的文章。
那么继承(或委托)呢?
javascript 代码

var Person = {
init:function(name){
this.name =name;
},
sayName:function(){
console.log(this.name);
}
};
var JSer = {
work:function(){
console.log(“coding javascript”);
}
};
Object.setPrototypeOf(JSer, Person);
var me = Object.create(JSer);
me.init(“laoyao”);
me.sayName();
me.work();

jsp前端界面开发|angular.js前端开发|前端开发中最常用到的js

» 本文来自:前端开发者 » 《前端开发与javascript的prototype》
» 本文链接地址:https://www.rokub.com/3836.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!