js中繼承的幾種實現方式

1、繼承
一、利用原型鏈實現繼承
function SuperFn(){
	this.flag=true;
}
SuperFn.prototype.judgeFlag=function(){
	console.log("this.flag",this.flag)
}
function suberFn(name){
	this.flag=name
}
var s=new SuperFn()
suberFn.prototype=s;
優勢：全部實例能夠共享原型對象中的屬性和方法
缺點：若是原型對象中的屬性是引言類型，會致使全部實例的更改（官方：若是包含引用類型值的原型屬性會被全部實例共享）（它的優勢也便是他的缺點）
二、利用call方法實現繼承（借用構造函數）
function superName(name){
  console.log("super")
  this.name=name	
}
function subName(age){
	console.log("suber")
	superName.call(this)
	this.age=age
}
superName.prototype.sayname=function(){
  console.log("name==",this.name)
}
subName.prototype=new superName()
subName.prototype.constructor=subName
優勢：在子類構造函數中能夠向超類構造函數傳遞參數
缺點：不能實現函數複用（超類原型對象中定義的屬性和方法不能共享）
三、組合式繼承（將原型鏈和構造函數合在一塊兒）
function superType(name){
	console.log("super")
	this.name=name
}
function suberType(age){
	console.log("suber")
	superType.call(this,"lxx");  //第二次調用超類 superType
	this.age=age
}
superType.prototype.sayname=function(){
	console.log("name==",this.name)
}
suberType.prototype=new superType()  //第一次調用超類 superType
suberType.prototype.constructor=suberType
優勢：能夠共享原型對象的屬性和方法，能夠向超類傳遞參數
缺點：無論什麼狀況下，都會兩次調用超類構造函數
四、利用Object.create實現繼承
var person={
	name:'lxx',
	age:23,
	sex:1
}
var another=Object.create(person)
function animal(){
	this.say=true;
}
animal.prototype.sayname=function(){
	console.log("name==",this.say)
}
var dog=Object.create(animal.prototype) //利用Object.create(animal.prototype)來實現及繼承
Object.create()方法MDN是上的標準解釋是：Object.create()方法建立一個新對象，使用現有的對象來提供新建立的對象的__proto__。 
Tips: Object.create(null)能夠建立一個沒有任何原型的對象
缺點：瀏覽器兼容問題，IE 9+,chorome，Safari 5+,Firefox 4+;
五、利用class(es6)語法實現繼承
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
	return 3
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
class colorPoint extends Point{
	constructor(x,y,color){
		super(x,y);
		this.color=color
	}
}複製代碼