/**
* 原型链继承
* 缺点:
* 父类的所有引用属性(info)会被所有子类共享,更改一个子类的引用属性,其他子类也会受影响
* 另一种是直接继承prototype
* 即:Child.prototype = Person.prototype 缺点很明显 原型改变父原型也改变
*/
function Person() {
this.name = '123';
this.obj = {
name: "张三"
}
}
Person.prototype.getName = function () {
return this.name
}
function Child() {
}
Child.prototype = new Person();
Child.prototype.constructor = Child
console.log(new Child().getName())
let child = new Child()
child.obj.name = '456'
console.log(new Child().obj.name)//456
console.log(child)
/**
* 构造函数继承
* 缺点:继承不到父类的原型上的属性和方法
* 原理:new 关键字过程:new 先生成一个新对象,并把this指向这个实列对象,
* 然后执行这个这个构造函数=>
* 当Person.apply(this) 上面的新对象执行了一遍父类构造
* 优点:
* 可以向父构造传参
*/
function Child2() {
Person.apply(this, arguments)
//return {}
}
console.log(new Child2().name)
try {
console.log(new Child2().getName())//报错,因为继承不到父类的原型上的属性和方法
} catch (error) {
//console.log(error)
}
/**
* 上面两个的结合
* 组合继承
* 父类的方法可以复用
* 可以在Child构造函数中向Parent构造函数中传参
* 父类构造函数中的引用属性不会被共享
* 为什么:js的访问机制:先在实列对象上找,当实列对象上没有的时候才去原型上找
* Person.apply(this,arguments) 这个就意味着子类拥有一份父类引用属性
* 修改只是修改了实列对象
*
*/
function Child3() {
Person.apply(this, arguments)
}
Person.prototype.newObj = {
newVal: "2444"
}
Child3.prototype = new Person();
Child3.prototype.constructor = Child3
console.log(new Child3().name)//123
new Child3().obj.name = "李四"
console.log(new Child3().getName())//123
//演示为什么
console.log(new Child3().newObj.newVal)//2444
new Child3().newObj.newVal = '2333'
console.log(new Child3().newObj.newVal)//2333
//对象的继承
/**
* 原型式继承YUI库
* 上面的构造继承 多new 一个父类对像,内存增加 把他放在一个新空对象上即可
*/
function Child4() {
}
var F = function () { };
F.prototype = Person.prototype;
Child4.prototype = new F();
Child4.prototype.constructor = Child4;
/**
* 拷贝继承
* @param {*} Child
* @param {*} Parent
*/
function copyExtend(Child, Parent) {
var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i];
}
}
javascript函数的继承
于 2022-04-21 17:11:41 首次发布