JavaScript对象及初识面向对象

原型对象:

 

继承:

继承在js中占有非常重要的地位，那么在js中有很多中继承的方式，不过每一种继承方式都有优缺点。下面就列举几种继承的方式。

1.实现继承首先需要一个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已

function People(name){ //属性 this.name = name || Annie //实例方法 this.sleep=function(){ console.log(this.name + '正在睡觉') } } //原型方法 People.prototype.eat = function(food){ console.log(this.name + '正在吃：' + food); }

1.原型链继承

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

function Woman(){ } Woman.prototype= new People(); Woman.prototype.name = 'haixia'; let womanObj = new Woman();

优点：

简单易于实现，父类的新增的实例与属性子类都能访问

缺点：

可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面

无法实现多继承

创建子类实例时，不能向父类构造函数中传参数

2.借用构造函数继承（伪造对象、经典继承）

复制父类的实例属性给子类

function Woman(name){ //继承了People People.call(this); //People.call(this，'wangxiaoxia'); this.name = name || 'renbo' } let womanObj = new Woman();

优点：

解决了子类构造函数向父类构造函数中传递参数

可以实现多继承（call或者apply多个父类）

缺点：

方法都在构造函数中定义，无法复用

不能继承原型属性/方法，只能继承父类的实例属性和方法

3.实例继承（原型式继承）

function Wonman(name){ let instance = new People(); instance.name = name || 'wangxiaoxia'; return instance; } let wonmanObj = new Wonman();

优点：

不限制调用方式

简单，易实现

缺点：不能多次继承

4.组合式继承

 

调用父类构造函数，继承父类的属性，通过将父类实例作为子类原型，实现函数复用

function People(name,age){ this.name = name || 'wangxiao' this.age = age || 27 } People.prototype.eat = function(){ return this.name + this.age + 'eat sleep' } function Woman(name,age){ People.call(this,name,age) } Woman.prototype = new People(); Woman.prototype.constructor = Woman; let wonmanObj = new Woman(ren,27); wonmanObj.eat();

缺点：

由于调用了两次父类，所以产生了两份实例

优点：

函数可以复用

不存在引用属性问题

可以继承属性和方法，并且可以继承原型的属性和方法

5.寄生组合继承

通过寄生的方式来修复组合式继承的不足，完美的实现继承

//父类

function People(name,age){

this.name = name || 'wangxiao' this.age = age || 27

}

//父类方法

People.prototype.eat = function(){

return this.name + this.age + 'eat sleep'

} //子类

function Woman(name,age){

//继承父类属性

People.call(this,name,age)

} //继承父类方法

(function(){

// 创建空类 let Super = function(){};

Super.prototype = People.prototype;

//父类的实例作为子类的原型 Woman.prototype = new Super(); })();

//修复构造函数指向问题 Woman.prototype.constructor = Woman; let womanObj = new Woman();

6.es6继承

代码量少，易懂

//class 相当于es5中构造函数 //class中定义方法时，前后不能加function，全部定义在class的protopyte属性中 //class中定义的所有方法是不可枚举的 //class中只能定义方法，不能定义对象，变量等 //class和方法内默认都是严格模式 //es5中constructor为隐式属性 class People{ constructor(name='wang',age='27'){ this.name = name; this.age = age; } eat(){ console.log(`${this.name} ${this.age} eat food`) } } //继承父类 class Woman extends People{ constructor(name = 'ren',age = '27'){ //继承父类属性 super(name, age); } eat(){ //继承父类方法 super.eat() } } let wonmanObj=new Woman('xiaoxiami'); wonmanObj.eat();

ES5继承和ES6继承的区别

es5继承首先是在子类中创建自己的this指向，最后将方法添加到this中

Child.prototype=new Parent() || Parent.apply(this) || Parent.call(this)

es6继承是使用关键字先创建父类的实例对象this，最后在子类class中修改this

 

结束语：

es6中很多代码的语法糖，很多方法简单易用。在浏览器兼容的情况下，改变原有方式。

虽然现在很多框架都是es6，但对于初学者还是建议多看看es5中实现的原理。