【红宝书p245原型式继承】
1,调用函数,返回一个原型是父类对象的空子对象,查看空子对象结构
<script>
function object(o) {
// 注意:object只是一个普通的函数
// F()相当于子类
function F() { }
F.prototype = o;
return new F();
}
**// 注意:父类的实例用字面量对象来表示**
let person = {
name: 'ike',
friends: ['tom', 'jack']
}
let otherPerson = object(person);
// otherPerson就是一个原型为person的空对象
console.dir(otherPerson);
</script>
2,给子类实例添加属性,子类原型属性添加引用值,查看结构
<script>
function object(o) {
// 注意:object只是一个普通的函数
// F()相当于子类
function F() { }
F.prototype = o;
return new F();
}
let person = {
name: 'ike',
friends: ['tom', 'jack']
}
let otherPerson = object(person);
// otherPerson就是一个原型为person的空对象
otherPerson.name = 'tom';
// 给子类对象添加属性
otherPerson.friends.push('lucy');
console.dir(otherPerson);
</script>
3,创建第二个子类实例,查看结构
<script>
function object(o) {
// 注意:object只是一个普通的函数
// F()相当于子类
function F() { }
F.prototype = o;
return new F();
}
let person = {
name: 'ike',
friends: ['tom', 'jack']
}
//创建一个实例
let otherPerson = object(person);
// otherPerson就是一个原型为person的空对象
otherPerson.name = 'tom';
// 给子类对象添加属性
otherPerson.friends.push('lucy');
// 新建第二个子类实例
let otherPerson2 = object(person);
console.dir(otherPerson2);
</script>
4,注意,修改子类实例原型(父实例)属性,会将父对象属性更改,造成所有子类实例的原型都一样(都是修改后的结果)
<script>
function object(o) {
// 注意:object只是一个普通的函数
// F()相当于子类
function F() { }
F.prototype = o;
return new F();
}
let person = {
name: 'ike',
friends: ['tom', 'jack']
}
//创建一个实例
let otherPerson = object(person);
// otherPerson就是一个原型为person的空对象
otherPerson.name = 'tom';
// 给子类对象添加属性(注意:父实例对象里面的属性会被更改)
otherPerson.friends.push('lucy');
// 修改原型上面的属性值
otherPerson.__proto__.name = 'jason';
console.dir(otherPerson);
// 新建第二个子类实例
let otherPerson2 = object(person);
otherPerson2.friends.push('lily')
console.dir(otherPerson2);
console.log(otherPerson.__proto__ === otherPerson2.__proto__);
</script>
子类所有实例的原型都一样,不管修改父对象属性的先后顺序
5,规范化原型式继承(es5的Object.create())
<script>
let person = {
// 原型对象
name: 'ike',
friends: ['tom', 'jack']
}
// es5中Object.create(父类实例,[子类属性及其特性])创建子类实例
let otherPerson = Object.create(person, {
age: {
value: 24,
}
});
console.dir(otherPerson);
</script>