深度剖析js原型

es5版本:

由浅入深地讲

先说使用

function person(age, sex) {
    this.age = age;
    this.sex = sex;
    this.clothes = [];
}

 person.prototype.addCloud = function(cloth) {
       this.clothes.push(cloth);
}  // 给对象增加增添服装的方法

var a = new person(18, 0); // a  = {age: 18, sex: 0, clothes: []}, a 现在就是一个18岁的小女孩了
var b = new person(19, 1); // b  = {age: 19, sex: 1, clothes: []}, b 现在就是一个19岁的小男孩了

a.addCloud('redCloth') // a = {age: 18, sex: 0, clothes: ['redCloth']},a新添 红色衣服 

以上内容是原型最简单的使用,相当于构造一个对象,person被称为构造函数,new person()被称为实例化,a,b被称为实例对象

稍微增加点难度

person.prototype.sayHello = function(word) {
    console.log( 'I am ' + this.age + 'years old!' + word);
}

a.sayHello('nice to meet you'); //I am 18years old!nice to meet you

这里输出了a的一个属性age;

再增加一点难度,插个题外话,讲一下this 的指向问题。
这里调用实例对象的age,在声明方法的时候,是用的this。刚刚增添衣服的时候,也是用的this,原因是因为a调用的这个方法,要是写一个
var c = a.sayHello;
c('nice to meet you') //I am undefinedyears!nice to meet you
那么如果想像刚刚一样的执行效果有以下四种方法
1.window.age = a.age;
2.c.bind(a)('nice to meet you');
3.c.call(a, 'nice to meet you');
4.c.apply(a, ['nice to meet you']);

回归正题,再稍微增加一点难度,讲一下继承;
这里不讲继承的方法,只讲继承的原理;



评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理