[JS] ECMAScript 6 - Prototype : compare with c#

开胃菜

---

prototype 对象

JavaScript 语言的继承则是通过“原型对象”（prototype）。

function Cat(name, color) {　　// <----构造函数
  this.name  = name;
  this.color = color;
  this.meow  = function () {
    console.log('喵喵');
  };
}

var cat1 = new Cat('大毛', '白色');
var cat2 = new Cat('二毛', '黑色');

cat1.meow === cat2.meow　　// <----无法共享，这就是个问题，需要解决，否则浪费内存
// false

JavaScript 规定，每个函数都有一个prototype属性，指向一个对象，这个对象其实也有自己的原型对象，然后形成了一个原型链！

共享属性

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';　　// <---- 相当于一个共享属性的东西

var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');

cat1.color // 'white'
cat2.color // 'white'

当实例对象本身没有某个属性或方法的时候，它会到原型对象去寻找该属性或方法。

如果本来就有，当然是用自己本身的啦。

另一个例子：属性livesIn和price希望能够共享

你看到所有的鱼都有属性livesIn和price，我们甚至都没有为每一条不同的鱼特别声明这些属性。

这时因为当一个对象被创建时，这个构造函数 将会把 它的属性prototype ----> 新对象的内部属性__proto__。

这个__proto__被这个对象用来查找它的属性。

你也可以通过prototype来给所有对象添加共用的函数。这有一个好处：你不需要每次在构造一个对象的时候创建并初始化这个函数。

所有对象的祖宗 - Object.prototype

如果一层层地上溯，所有对象的原型最终都可以上溯到Object.prototype，即Object构造函数的prototype属性。

也就是说，所有对象都继承了Object.prototype的属性。

这就是所有对象都有valueOf和toString方法的原因，因为这是从Object.prototype继承的。

因此，原型链的尽头就是null。

Object.getPrototypeOf(Object.prototype)
// null

伪装之术

自己定义的对象MyArray, 其构造函数是MyArray，内部的prototype属性指向数组Array

var MyArray = function () {};　　

MyArray.prototype = new Array();　　　　　　　　// 指向一个数组实例
MyArray.prototype.constructor = MyArray;     // prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数

var mine = new MyArray();　　                 // 实例对象
mine.push(1, 2, 3);
mine.length //
mine instanceof Array // true

原型的构造函数就是自己

function P() {}
var p = new P();

/**
 * P类的prototype也即是上一级的constructor 就是它本身。
 * 自己是没有constructor之说的，自己的其实就是自己原型的。
 **/

p.constructor === P // true
p.constructor === P.prototype.constructor // true

p.hasOwnProperty('constructor') // false, 小p自己是没有constructor的

创建一个兄弟

function Constr() {}
var x = new Constr();

var y = new x.constructor();　　// 调用自身的构造函数常见一个兄弟
y instanceof Constr 　　　　　　 // true

雷区：修改原型对象时，一般要同时修改constructor属性的指向。

function Person(name) {
  this.name = name;
}

Person.prototype.constructor === Person // true

/**
 * 构造函数Person的原型对象改掉了，但是没有修改constructor属性
 * 那么，prototype.constructor当然就不是从前了
 **/

Person.prototype = {
  method: function () {}
};

Person.prototype.constructor === Person // false
Person.prototype.constructor === Object // true 

雷图：修改原型对象时，一般要同时修改constructor属性的指向。

// 坏的写法
C.prototype = {
method1: function (...) { ... },
  // ...
};
--------------------------------------------------------
// 好的写法
C.prototype = {
  constructor: C,　　// <----　记得一定要同时set construtor
method1: function (...) { ... },
  // ...
};

// 更好的写法
C.prototype.method1 = function (...) { ... };

instanceof 运算符

是否在左边对象的原型链上 - 判断类型

var v = new Vehicle();
v instanceof Vehicle // true
v instanceof Object  // true

Vehicle.prototype.isPrototypeOf(v)

// Jeff: instanceof运算符只能用于对象，不适用原始类型的值(such as string)。
var s = 'hello';
s instanceof String // false 

// 此外，对于undefined和null，instanceOf运算符总是返回false。

undefined instanceof Object          // false
null      instanceof Object          // false

常用方法

---

People是对象的构造函数。

function People(name)
{
  this.name=name;
  //对象方法
  this.Introduce=function(){　　　　                 // (1) 生成一个实例，就能使用该方法
    alert("My name is "+this.name);
  }
}
-----------------------------------------------
//类方法
People.Run=function(){                             // (2) 不需要通过生成实例，可直接使用的方法
  alert("I can run");
}
-----------------------------------------------
//原型方法
People.prototype.IntroduceChinese=function(){      // (3) 给(1)带来了额外的补充
  alert("我的名字是"+this.name);
}
----------------------------------------------- 
//测试
var p1=new People("Windking");
p1.Introduce();           // (1)
People.Run();             // (2)
p1.IntroduceChinese();    // (3)

基本概念理解：

(1)、对象方法理解就很简单了，主要是如果类生成一个实例，那么该实例就能使用该方法
(2)、类方法，不需要通过生成实例就可以使用的方法
(3)、原型方法主要是用来对JS已有的系统对象进行扩展而生的，例如Array数组没有什么方法，你可以为其增加原型方法，那么创建的数组就拥有了该方法。

1、对象方法包括构造函数中的方法以及构造函数原型上面的方法；
2、类方法，其实这里的类就是一个函数，在js中由于函数也是一个对象，所以可以为函数添加属性以及方法，这种方法在node中用的比较多；
3、原型方法一般用于对象实例共享，比如Person.prototype.sayName=function(){console.log(this.name);};在原型上面添加该方法，就能实现共享。这样就不用每一次初始化一个实例的时候，为其分配相应的内存了。

添加共有方法

为什么要这么搞？因为我们可以先定义属性，然后在我们“想好了"之后，再添加方法。

// 1. 先定义好了必要的属性
function Employee(name, salary){
    this.name=name;
    this.salary=salary;
}

// 2. 等知道如何操作了才定义方法，如此，灵活的不要不要的
Employee.prototype.getSalary=function getSalaryFunction(){
    return this.salary;
}
Employee.prototype.addSalary=function addSalaryFunction(addition){
    this.salary=this.salary+addition;
}
var boss1=new Employee("Joan", 200000);
var boss2=new Employee("Kim", 100000);
var boss3=new Employee("Sam", 150000);

添加私有方法

function Aclass(){
　　this.Property = 1;
　　this.Method = function(){
    　　alert(1);
　　}
}
var obj = new Aclass();
obj.Property2 = 2;　　　　　　　　// 对象为自己添加了私有属性
obj.Method2   = function(){    // 对象为自己添加了私有方法
    alert(2);
}
alert(obj.Property2);
obj.Method2();

重写父类属性和方法

function AClass(){
    this.Property = 1;
    this.Method = function(){
        alert(1);
    }
}
function AClass2(){
   this.Property2 = 2;
   this.Method2 = function(){
        alert(2);
   }
}
AClass2.prototype = new AClass();　　　　// AClass2继承了AClass？No!　----> 补充
AClass2.prototype.Property = 3;         // 然后重写了属性
AClass2.prototype.Method = function(){  // 之后重写了方法
   alert(4);
}
var obj = new AClass2();
alert(obj.Property);
obj.Method();

补充 ---->

理解prototype不应把它和继承混淆。

可以出现这种情况：A的prototype是B的实例，同时B的prototype也是A的实例。

A的prototype为B的一个实例，可以理解A将B中的方法和属性全部克隆了一遍。

例子：

定义了baseClass类，然后我们要定义extendClass

但是我们打算以baseClass的一个实例为原型，来克隆的extendClass，也同时包含showMsg这个对象方法。

function baseClass(){
   this.showMsg = function(){
       alert("baseClass::showMsg");
   }
}
function extendClass(){}
extendClass.prototype = new baseClass();　　// 以一个实例（对象）为原型，全部克隆了一遍

// 扩展好了extendClass，再new个对象执行里面的方法
var instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg

调用父类属性和方法

如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办？

function baseClass(){
    this.showMsg = function(){
        alert("baseClass::showMsg");
    }
}

function extendClass(){
    this.showMsg =function (){　　　　　　//有自己的，就不甩父类的同命名的方法了
        alert("extendClass::showMsg");
    }
}
-----------------------------------------------------------------------------
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg();//显示extendClass::showMsg

但是，我还是偏偏想调用父类中的被覆盖的方法，怎么办？

-----------------------------------------------------------------------------
extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();　　// 通过对象方法，而不是类方法！
baseinstance.showMsg.call(instance);//显示baseClass::showMsg　　<---- 使用call重定义this这个对象的

• 阮一峰:Javascript的this用法

• 郭培:Javascript中call的使用【关于以上的call的使用】

function定义的方法(对象方法 or 构造方法)有一个prototype属性：它是对象方法或者构造方法的专有属性。它指向一个prototype对象。

使用new生成的对象就没有这个prototype属性。

function Person(name)
{
   this.name=name;
   this.showMe=function()
        {
           alert(this.name);
        }
};    
var one = new Person('js');    
alert(one.prototype)//undefined  　　　　　　// 使用new生成的对象就没有这个prototype属性。
alert(typeof Person.prototype);            //object   但是这个就有
alert(Person.prototype.constructor);       //function Person(name) {...};  　　prototype是Person的属性，该属性指向同名的prototype对象

对象中的Prototype相关

---

• __proto__属性

读取或设置当前对象的prototype对象。

• Object.setPrototypeOf()

ES6 正式推荐的设置原型对象的方法。

// 格式
Object.setPrototypeOf(object, prototype)

// 用法
const o = Object.setPrototypeOf({}, null);

/** 该方法等同于下面的函数　**/

function (obj, proto) {
　　obj.__proto__ = proto;
　　return obj;
}

实际用法，设置共享属性

let proto = {};
let obj   = { x: 10 };
Object.setPrototypeOf(obj, proto);　　// proto与obj有了关系，proto有了什么，obj就能有什么，有福共享的意思

// 如果第一个参数obj不是对象，会自动转为对象。
// 但是由于返回的还是第一个参数，所以这个操作不会产生任何效果。
// 由于undefined和null无法转为对象，所以如果第一个参数是undefined或null，就会报错。

proto.y = 20;
proto.z = 40;

obj.x //
obj.y //
obj.z //

• Object.getPrototypeOf()

用于读取一个对象的原型对象。

• super 关键字

ES6 新增，指向当前对象的原型对象

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

雷区：表示原型对象时，只能用在对象的方法之中

第一种写法是super用在属性里面，

第二种和第三种写法是super用在一个函数里面，然后赋值给foo属性。

只有对象方法的简写法可以让 JavaScript 引擎确认，定义的是对象的方法。

下面代码中，super.foo指向原型对象proto的foo方法，但是绑定的this却还是当前对象obj，因此输出的就是world。

const proto = {
  x: 'hello',
  foo() {　　　　　　　　　　　　// <--　指向了这里，但this却还是当前对象obj
    console.log(this.x);
  },
};

const obj = {
  x: 'world',
  foo() {
    super.foo();　　　　// --> super.foo指向原型对象proto的foo方法
  }
}

Object.setPrototypeOf(obj, proto);

obj.foo() // "world"

/* implemnet */

Javascript中call的使用