markdown JS实现继承的几种方式

Posted 2021-05-05

### 父类

```
// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};
```

### 原型链继承

>在JS中没有类的概念，继承是通过对象和对象之间实现的。其中主要是利用prototype属性来实现的

>函数中的prototype属性，又叫原型对象。构造函数可以通过prototype属性来添加函数。这样做到代码的简单性，避免冗余代码。还可以通过prototype属性来实现继承

>将父类的实例作为子类的原型

```
function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true
```

>.prototype

>.call

>.apply

>call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组

```
// Person类:
function Person(name,age) {
　　this.name = name;
　　this.age = age;
}

// Student类:
function Student(name,age,height) {
　　Person.apply(this,arguments); //当 this 为 null 时，最后的输出为：name:undefined  age:undefined  height:173
　　//Person.call(this,name,age,height);   //call方法的传参方式;    
　　this.height = height;
}

// 实例化:
var student = new Student("chams",22,"173");

// 测试:
console.log("name:" + student.name + "  age:" + student.age + "  height:" + student.height);
//name:chams  age:22  height:173

// Student类中并没有name和age属性,但是通过apply和call的继承,使Student类继承了Person类中的成员方法

function Animal(words){
  this.words=words,
  this.say=function(){
  　　console.log(this.words);        
  }        
}
function Cat(words){
   Animal.call(this,words);       
}
var cat = new Cat('Miao');
cat.say();//Miao
```

>什么情况下用apply,什么情况下用call

>在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply , 

>如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade))

>apply可以将一个数组默认转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3)

```
var　arr1=new Array("1","2","3");  
var　arr2=new Array("4","5","6");  
Array.prototype.push.call(arr1,arr2);  
arr1 // ["1", "2", "3", ["4", "5", "6"]]

var　arr1=new Array("1","2","3");  
var　arr2=new Array("4","5","6");  
Array.prototype.push.apply(arr1,arr2);  
arr1 // ["1", "2", "3", "4", "5", "6"]

// Array.prototype.push native code
function push(obj, value){
  if(typeof obj.length !== 'number'){
    obj.length = 0;
  }
  obj[obj.length] = value;
  obj.length += 1;
}
```

```
var max = Math.max.call(null, 5, 6, 2, 3, 7 );
max
7

var numbers = [5, 6, 2, 3, 7];
var max = Math.max.apply(null, numbers);
max
7

var numbers = [5, 6, 2, 3, 7];
var max = Math.max.call(null, numbers);
max
NaN

var numbers = [5, 6, 2, 3, 7];
var max = Math.max.apply(null, 5, 6, 2, 3, 7 );
max
Uncaught TypeError: CreateListFromArrayLike called on non-object
```

### 参考

[Function.prototype.call()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call)

[JS实现继承的几种方式](https://www.cnblogs.com/humin/p/4556820.html)