1.构造函数继承
function animal() {
this.type = "动物"
}
function Cat(name, price) {
animal.call(this, arguments)/*改变this指向*/
this.name = name;
this.price = price;
}
var cat1 = new Cat('tom', '$8888')
console.log('输出继承自构造函数animal的属性type值', cat1.type)
2. 原型继承
//prototype继承
function Person() {
this.type = "人类"
}
function Man(name, age) {
this.name = name;
this.age = age;
}
//一定要注意顺序问题,就是继承一定要在创建实例之前,这样才能继承到其相应的属性
//错误写法
// var per1 = new Man('ak', 21)
// per1.prototype = new Person();
// per1.prototype.constructor = Man;
// console.log(per1.type)
//正确写法
Man.prototype = new Person();
Man.prototype.constructor = Man;
var per1 = new Man('ak', 21);
console.log(per1.type)
分析:
-
Man.prototype = new Person();
的作用时将Man原型对象指向了Person的实例 -
Man.prototype.constructor = Man;
该行代码的作用:
1.由于每一个对象的原型prototype都有一个默认的constructor属性,该属性指向其构造函数;由于当我执行了原型继承时,即Man.prototype = new Person();,那么构造函数Man的原型便执行了Person
2.从事便需要注意,Man的原型指向了Person,那么之后创建的Man实例的prototype必然也是指向Person的,这样便引起了原型继承的错乱关系,所以我们需要手动的将原型继承手动改回来,改回其原本自身,即Man
3.非构造函数实现继承
3.0 引入问题:
说明:
比如,现在有一个对象,叫做"中国人"
var Chinese = {
nation: '中国',
arr: [1, 2, 3]
}
还有一个对象,叫做"医生"。
var Doctor = {
career: '医生'
}
请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象?
这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承"。
3.1 浅拷贝实现继承
- 思路:把父对象的属性,全部拷贝给子对象,也能实现继承
浅拷贝继承函数如下:
function extendCopy(f, c) {
var c = {}
for (let i in f) {
c[i] = f[i]
}
return c;
}
- 使用
var doctor3 = extendCopy(Chinese);
console.log(doctor3.nation) //中国
console.log(doctor3.arr) //[1,2,3]
使用浅拷贝的缺点:
- 子已经继承了父的所有属性,但是当子继承了父的引用类型的属性时,
- 实质上获取到的是一个内存地址,因此会存在父对象被子对象撰改的心现象
- extendCopy()只是拷贝基本类型的数据,我们把这种拷贝叫做"浅拷贝"
3.2 深拷贝实现继承
说明:所谓深拷贝,就是能实现真正意义上对数据和对象的拷贝。
思路:使用递归调用
深拷贝函数如下:
//实现深拷贝
function deepCopy(f, c) {
//
var c = c || {}
//将f拷贝至c
for (let i in f) {
//1.首先判断是否为引用数据类型
if (typeof f[i] === 'object') {
//2。 数组:[],对象:{})
c[i] = (f[i].constructor === Array) ? [] : {};
//递归调用(即判断引用数据类型的子属性是否仍然存在引用数据类型)
deepCopy(f[i], c[i])
} else {
//当不是引用数据类型时,直接赋值拷贝
c[i] = f[i]
}
}
return c;
}
使用:
var doctor2 = deepCopy(Chinese);
doctor2.arr.push('5')
console.log('doctor2----', doctor2.arr);
console.log('Chinese----', Chinese.arr);
输出结果:
说明:
- 这时,父对象就不会受到影响了。