原型链
在 JS 中原型链就是实现继承的方式,由于 JS 中没有类的概念,所以实现的是构造函数之间的继承关系。
所谓继承就是在子级对象中可以访问父级中的属性和方法。如下代码实现了继承的关系:
function Animal(){
this.eatFood = function (){
console.log('干饭了,干饭了')
}
}
var monkey = new Animal();
function Person(name){
this.name = name;
}
Person.prototype = monkey;
var people = new Person('小明');
function Student(){
this.goSchool = function (){
console.log('我去上学了')
}
}
Student.prototype = people;
var stu = new Student();
stu.eatFood();
console.log(stu.name);
stu.goSchool();
结果:
干饭了,干饭了
小明
我去上学了
仅仅继承于原型
在上面的方法中,我们为了实现继承需要依靠,创建对象来进行,为了提高效率我们可以直接将属性和方法添加到原型上。
实现代码如下:
function Animal(){}
// 为Animal 的原型添加 eatFood 方法
Animal.prototype.eatFood = function () {
console.log('干饭了,干饭了')
};
function Person(){}
//为Person 的原型添加 name 和继承 Animal 中的成员
Person.prototype = Animal.prototype;
Person.prototype.name = '小明';
function Student(){
this.goSchool = function (){
console.log('我去上学了')
}
}
//为 Student 的原型继承 Person 的原型
Student.prototype = Person.prototype;
var stu = new Student();
stu.goSchool();
console.log(stu.name);
stu.eatFood()
第 3 行代码必须添加到原型上,否则原型为空对象,后面函数继承的原型也为空对象。
第 9、10 行代码的顺序不能颠倒,否则后面将 Animal 的原型赋值给了 Person 的原型。会覆盖第 9 行的原型的 name 属性
结果:
我去上学了
小明
干饭了,干饭了
原型链实现继承的问题
之前说过 JS 是没有继承的,我们之前的测试只是通过原型链实现了一个类似继承的东西,准确的说是共享。
原型链实现的继承,是存在问题的。如下代码:
function Animal() {}
Animal.prototype.a = 'this is Animal';
function Person() {}
Person.prototype = Animal.prototype;
Person.prototype.p = 'this is Person';
function Student() {}
Student.prototype = Person.prototype;
Student.prototype.s = 'this is Student';
var stu = new Student();
var ani = new Animal();
var per = new Person();
// 在 “父级” 中访问子级对象中的属性也能访问到,所以是共享的
console.log(stu.a);
console.log(ani.s);
console.log(per.s);
结果:
this is Animal
this is Student
this is Student
- 原型链实现的继承实际上是共享了构造函数的属性和方法。
- 创建子级对象,不能向父级中传递参数。
原型式继承
原型式继承就是定义一个函数,该函数中传入一个 Object 类型的形参,且在该函数中创建一个临时性的构造函数,
临时构造函数的原型指向传入的 Object 类型的形参,然后返回临时构造函数构造的对象。
实现代码如下:
function fn1(obj) {
function innerFun() {}
innerFun.prototype = obj;
return new innerFun();
}
var obj = {
name: '小明'
};
var result = fn1(obj);
console.log(result.name);
结果:
小明
我们可以对其进行改造,可以在外部构造函数中定义自己的属性和方法,实现代码如下:
function fn1(obj, args) {
innerFun.prototype = obj;
function innerFun() {
for (var attr in args){
this[attr] = args[attr]
}
}
return new innerFun();
}
var parentObj = {
name: '小明'
};
var obj1 = fn1(parentObj,{
age: 18,
say: function () {
console.log('this is say function');
}
});
console.log(obj1.age);
obj1.say();
//检测 say 方法是否为 obj1 的自有属性
console.log(obj1.hasOwnProperty('say'));
关键代码为 1-9 行
结果:
18
this is say function
true
Object.create() 方法实现继承
Object中的 create 方法,于我们上面提到的方法的实现原理是相同的,只不过使用的方式不一样。
语法结构:
Object.create(obj, {
attr : {
value: 值,
writable: true/false,
...
},
func : {
value: function () {
...
},
writable: true/false,
...
},
...
示例代码:
var obj = {
name: '小明'
};
var newObj = Object.create(obj, {
age : {
value: 18,
writable: true
},
say: {
value: function () {
console.log('我是小明')
},
writable: false
}
});
console.log(newObj.age);
newObj.say();
结果:
18
我是小明
这种方式和上面方式的区别在于,本方法只能将属性或方法写为属性描述符的形式。
借助构造函数实现继承(精华)
这种方式主要是通过 call 和 apply 函数加上 this 关键字来实现。实现的核心在于 this 关键字加上 JS 函数的灵活性。
其实原理就是在子级构造函数中使用 call或apply 方法调用父级构造函数,通过 this 灵活的传递参数,在加上一些参数。
可以更加类似于其他语言的继承。
来看简版代码:
function Person() {
this.name = '小明';
}
function Student(){
Person.apply(this);
this.age = 16;
}
var stu = new Student();
console.log(stu);
读者要密切留意这里的 this,因为它为此方法的核心。
代码剖析:
- 首先看 Student 函数,我们通过前面的学习得知,当调用函数时会自动传入一个 this,
第 6 行代码将 Student 函数创建的对象传递进了 Person 方法。 - 接下来进入 Person 方法,此方法同样接收了一个 this,我们在 Student 函数中的
this 传递到了这里,因为 this 的传递无需依赖形参。也就是说,这里的this依然代表
Student 函数创建的对象(前提为在 Student 中调用时)。然后为 Student 的对象
创建了一个 name 属性。
打印结果:
Student { name: '小明', age: 16 }
在理解了上面的简版之后,我们将父级中的参数改为有形参定义的。
要实现此方法就要去看 call 和 apply 方法了。这里直接给出代码:
function Parent(name) {
this.name = name;
}
function Son(name, age) {
Parent.call(this, name);
this.age = age;
}
var son1 = new Son('大儿子', 18);
var son2 = new Son('小儿子', 3);
console.log(son1);
console.log(son2);
结果:
Son { name: '大儿子', age: 18 }
Son { name: '小儿子', age: 3 }
组合方式继承
所谓组合式继承就是将上述继承方式整合起来,取其优点。从而称为较优的解决方案。如下代码所示:
function Person(name) {
this.name = name;
}
Person.prototype.say = function () {
console.log('我是一个人');
};
function Student(name, age) {
Person.call(this, name);
this.age = age;
}
Student.prototype = Person.prototype;
Student.prototype.job = '学生';
var stu = new Student('小明', 15);
stu.say();
console.log(stu.name);
console.log(stu.age);
console.log(stu.job)
结果:
我是一个人
小明
15
学生
封装继承方法
ps:关于继承的方式笔者会一直更新
学过其他语言的铁子一定知道,在继承中都有 extends
这个关键字来实现继承,but,这个单词在 ES5 中是个保留字,在ES6中
才能用于实现继承,我们这里伪造一个 myExtends
方法用来实现继承,日后需要直接调用方法即可。
这种方法内置一个内部构造函数,形参中需要两个对象,一个父级对象,一个子级对象,我们将父级对象中的属性和方法添加到内部
构造函数的原型上,将子级对象中的属性和方法添加到内部构造函数创建的对象上,然后返回此对象。
实现代码:
function myExtends(parentObj, childObj) {
function createObj() { }
createObj.prototype = parentObj;
var newObj = new createObj();
for (attr in childObj){
newObj[attr] = childObj[attr];
}
return newObj;
}
代码解析:
首先是第 2 行代码,这行代码定义了一个空构造函数。
第 4 行代码将内部构造函数的原型指向了第一个形参。也就是父级对象,这样创建出的对象具有了父级中的属性和方法。
第 6 行创建了一个待返回对象。
第 8-10 行使用迭代器将子级对象中的属性和方法添加到了待返回对象。