梦魇小栈

js高级与面向对象之继承

一个对象没有某些属性和方法,另一个对象有,拿过来使用,就是继承

继承的实现方式

混入式继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var obj = {};
var obj1 = {
money : 10000000,
car : 100,
brand: "布加迪威航",
huaqian: function(){
console.log("不差钱,随便花");
}
};
console.log(obj);
for(var k in obj1){
//money
//car
//brand
//huaqian
obj[k] = obj1[k];
}
console.log(obj);

原型继承

  • 通过修改原型实现的继承 就是原型继承
    通过构造函数创建出来的对象继承自构造函数的原型对象
1
2
3
4
5
6
7
8
9
var human = {
gender:"female",
height: 170,
weight: 50
}
function Person(){
}
//Person.prototype.name = "王莉莉";

原型继承的方式

  1. 通过混入的方式给原型添加属性和方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//Person.prototype
var human = {
gender:"female",
height: 170,
weight: 50
}
function Person(){
}
Person.prototype.name = "王莉莉";
for(var k in human){
Person.prototype[k] = human[k];
}
var p = new Person();
console.log(p.name,p.gender,p.height,p.weight);
  1. 修改原型对象
1
2
3
4
5
Person.prototype.maimeng = function (){
console.log("感觉自己萌萌哒");
}
p.maimeng();
  1. 替换原型对象
1
2
3
Person.prototype = human;
var p = new Person();
console.log(p.gender);

经典继承

《JavaScript语言精粹》

  • 调用一个方法,就能实现继承
    var obj1 = Object.create(obj)
  • 创建出来一个新的继承自参数 obj 的对象 obj1
  • 其实内部使用的就是原型继承
  • ES5才支持的这个方法 需要考虑兼容性问题
1
2
3
4
5
6
7
8
9
10
11
var human = {
name: "王莉莉",
gender: "female",
dance :function(){
console.log("二人转,转转转")
}
}
var obj = Object.create(human);
console.log(obj);

处理经典继承的兼容性问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
if(Object.create){
var obj = Object.create({name:"李狗二",age:18});
}else{
Object.create = function(obj){
//在这个函数中要实现的功能
//就是,创建一个对象,将obj设置为该对象的原型
//要设置原型,只能通过两种方式,
// 一种是 对象.__proto__ 另外一种是 构造函数.prototype
//由于__proto__这个属性有兼容性问题,所以不使用
//就只能使用 构造函数.prototype 去替换原型对象了
function F(){}
F.prototype = obj;
var result = new F();
return result;
}
}
//不推荐直接修改内置对象,因为在多人开发的时候,会产生冲突
Object.creat = function () {
console.log("我是李二狗,我的create方法就是用来输出这句话的,哈哈哈");
}
function hanyingxinCreate(obj){
if(Object.create){
return Object.creat(obj);
}else{
function F(){}
F.prototype = obj;
var result = new F();
return result;
}
}

继承的实际应用

  • 扩展内置对象

  • 扩展 string 的方法 trim()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//$.trim()
Array.prototype.sayHello = function () {
console.log("Hello, i'm a Array")
}
var arr = new Array();
arr.sayHello();
var arr1 = [];
arr1.sayHello();
//需求分析
//1.创建出来的对象得有数组的所有的方法和属性
//2.创建输出来的对象得有sayHello方法
//3.不能修改原生的内置对象
function MyArray(){
}
MyArray.prototype = [];
MyArray.prototype.sayHello = function () {
console.log("相加就加,随心所欲,为所欲为");
}
var myArr = new MyArray();
myArr.push(1,2,3,4,4,5);
console.log(myArr);
myArr.sayHello();
------ 有问题请 留言给我哦! 或者私信我的 微博 ------
满分是10分的话,这篇文章你给几分,您的支持将鼓励我继续创作!