JavaScript 的继承

  学习怎样创建对象是理解面向对象编程的第一步，第二步是理解继承。
  JS的继承方式与传统的面向对象编程语言不同，继承可以发生对象之间，这种继承的机制是我们已经熟悉的一种机制：原型

  一.原型链接和Object.prototype

  js内置的继承方式被称为原型链接或原型继承

  原型链：对象会继承自己原型对象中的属性，而这个原型会继续继承自己的原型，依此类推
              所有的对象都继承 Object.prototype
    

  var book = {
      title:'黑客与画家'
     };
     var prototype = Object.getPrototypeOf(book);
     console.log(prototype === Object.prototype)//true

从Object.prototype中继承的方法

 .hasOwnProperty()           判断对象中有没有某个属性
 .propertyIsEnumerable()     判断对象是否可枚举
 .isPrototypeOf()            判断一个对象是否是另一个对象的原型
 .valueOf()                  返回对象值的表示形式
 .toString()                 返回对象的字符串表示形式
 .toLocaleString()           返回对象的本地保存形式

 valueOf() 当我们操作对象时就会被调用。默认情况下会返回对象实例。对于字符串，布尔值和数字类型的值，首先会使用原始包装器包装成对象，在调用方法。

 var now = new Date();
 var earlier = new Date(2010,3,28)
 console.log(now > earlier)  //true
 console.log(now.toString()) //Fri Sep 15 2017 19:44:20 GMT+0800 (中国标准时间)
 console.log(now.toLocaleDateString()) //2017/9/15

 

二. 对象继承

最简单的继承方式是对象间的继承。我们所需要做的就是指定新创建的对象的原型指向哪个对象。Object字面量的形式创建的对象默认将__proto__属性指向了Object.prototype,但是我们可以通过Object.create()方法将__proto__属性指向其它对象

var person1 = {
name:'李三婆',
sayName:function(){
console.log(this.name);
}
};
var person2 = Object.create(person1,{
name:{
value:'刘老二',
enumerable:true,
}
})

person1.sayName() //李三婆
person2.sayName() //刘老二
console.log(person2.hasOwnProperty('sayName'))//false
console.log(person1.hasOwnProperty('sayName'))//true
console.log(person1.isPrototypeOf(person2))//true

三.构造函数继承

//1.简单示例：
var pander = {
name:'李四',
constructor:Persion
}
function Persion(name){
this.name = name
} 

Persion.prototype = pander 
var person1 = new Persion()
console.log(pander.isPrototypeOf(person1))//true
console.log(person1)

 

//2.由于prototype属性是可写的，因此通过复写它我们可以改变原型链。例如：
function Rectangle(length,width){
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function(){
return this.length * this.width;
}
Rectangle.prototype.toString = function(){
return '[Rectangle '+this.length+' x '+this.width+']'
}
Rectangle.prototype.getBoder = function(){
return 4;
}
    
// 继承 Rectangle
function Square(size){
Rectangle.call(this, size,size)
}

Square.prototype = new Rectangle;
Rectangle.prototype.constructor = Rectangle;

Square.prototype.toString = function(){
var text = Rectangle.prototype.toString.call(this);
return text.replace('Rectangle','Square') 
}
Square.prototype.getBoder = function(){
return 'Square边数：' + Rectangle.prototype.getBoder();
}

var square = new Square(20)
//console.log(square.getArea()) //400
//console.log(square.toString()) //[Square 20 x 20]
//console.log(square.getBoder()) //Square边数：4

在上面的代码，使用Square.prototype.toString()和call()方法一起调用Rectangle.prototype.toString()。
这个方法只需要在返回结果之前将Rectangle替换成Square就可以了。