在JS中有三种继承方式，分别是：
- 1、原型链继承
- 2、使用call、apply、bind实现继承，名曰冒充继承
- 3、Object.create(父对象)
一、原型链继承
JS中，所有实例对象都自动继承了原型链上的所有方法，即：只要把一个方法加入到实例对象的原型链中就实现了继承。
实现原理如下：
<!DOCTYPE html>
<html>
<head>
<title>面向对象(四) 原型对象应用案例-给原生对象扩展方法</title>
<script src="./jquery.js"></script>
</head>
<body>
<script type="text/javascript">
// 人都会说话和走路，而有的人会打球，有的人会唱歌
// 所以就将共有的方法定义为父类，子类只要继承父类即可
//定义父类构造函数
function Person(){
}
Person.prototype.say = function(){
console.log('所有人都会说话');
}
Person.prototype.walk = function(){
console.log('所有人都会走路');
}
//定义子类构造函数 歌手
function Songer(){
}
//将父类构造函数的实例对象赋值给子类构造函数的原型对象，这就继承了父类
Songer.prototype = new Person();
//给原型对象添加方法，实例对象自动继承
Songer.prototype.song = function(){
console.log('唱歌');
}
var obj = new Songer();
obj.say();
obj.walk();
obj.song();
//定义子类构造函数 球员
function Ball(){
}
Ball.prototype = new Person();
Ball.prototype.play = function(){
console.log('打球')
}
var obj2 = new Ball();
obj2.say();
obj2.walk();
obj2.play();
</script>
</body>
</html>
只要理解了前面我们所讲的原型链，那么原型链继承是非常简单的。
二、使用call、apply、bind实现继承，名曰冒充继承
<!DOCTYPE html>
<html>
<head>
<title>使用call、apply、bind实现继承</title>
</head>
<body>
<script type="text/javascript">
//优点：不会丢失子类对象的constructor属性
//缺点：只能继承父类构造函数中设置的成员，不能继承父类原型对象上的成员
//父类构造函数
function A(){
this.age = 30;
}
A.prototype.say = function(){
console.log(320);
}
//子类构造函数
function B(){
//this指向B的实例对象b
//使用子类this去冒充父类构造函数中的this，并且直接调用父类构造函数
//这样父类中的成员都设置到了子类对象中
A.call(this); // call apply bind 三选一
}
var b = new B();
console.log(b.age);//继承了父类A中的age，输出30
console.log(b.constructor);//实例对象b的构造函数B依然保留
b.say();//报错，因为这样不能继承父类原型对象上的成员
</script>
</body>
</html>
三、Object.create(父对象)
<!DOCTYPE html>
<html>
<head>
<title>Object.create(父对象)实现继承</title>
</head>
<body>
<script type="text/javascript">
var person = {"age":30};
//相当于var obj = new Object();或var obj = {};
//然后将person赋值给obj的原型对象 obj.__proto__ = person;
var obj = Object.create(person);
console.log(obj);
console.log(obj.age);
</script>
</body>
</html>
以上代码中的核心语句为var obj = Object.create(person);它的实质是：
1、创建一个空对象，等同于var obj = new Object();或var obj = {};
2、将person赋值给obj的原型对象，等同于obj.__proto__ = person;
|
窥视卡
雷达卡
发表于 2023-1-28 15:44:09
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-21 05:52:21
