JS原型、原型链、构造函数理解

一、函数对象(Function)和普通对象(Object)

• 由function定义或Function实例化的对象为函数对象，包括Function和Object

function Person1 (name) {
    this.name = name;
}
var Person2 = function(name) {
    this.name = name;
};
var Person3 = new Function('name', 'this.name = name');
...
typeof Person1 // function
typeof Person2 // function
typeof Person3 // function
typeof Object // function
typeof Function // function
...
// 所有的函数对象都是`Function`的实例对象
Person1 instanceof Function  // true
Object instanceof Function   // true
Function instanceof Function // true
Person1.__proto__ === Function.prototype  // true
Object.__proto__ === Function.prototype   // true
Function.__proto__ === Function.prototype // true

• 普通对象则是由函数对象(除Function外)实例化(new)的对象或字面量{}创建的对象

  // 实例化模式
  var p1 = new Person1('Franchen');
  var p2 = new Person2('Franchen');
  var p3 = new Person3('Franchen');
  var obj1 = new Object();
  // 字面量模式
  var obj2 = { name: 'Franchen' };
...
typeof p1 // object
typeof p2 // object
typeof p3 // object
typeof obj1 // object
typeof obj2 // object
...
// 注意：由Function实例化的对象是函数对象
var fun = new Function();
typeof fun // function

• 函数对象和普通对象的差别：函数对象含有原型对象属性prototype和原型链属性__proto__，而普通对象只有__proto__属性
• 每个函数对象都有个prototype属性，这个属性指向函数的原型对象，原型对象(除Object.prototype外)是普通对象（Object）的实例

Object.prototype // Object原型对象
Function.prototype // Function原型对象
Person.prototype // Person原型对象
...
typeof Object.prototype // object
typeof Function.prototype // object
typeof Person.prototype // object
...
// 原型对象类型
Person.prototype instanceof Object // true
Function.prototype instanceof Object // true
Person.prototype.__proto__ === Object.prototype // true
Function.prototype.__proto__ === Object.prototype // true
// Object的原型对象类型为null
Object.prototype.__proto__ === null // true

---

二、原型链（__proto__）

1. 每个对象都有__proto__属性，可以通过该属性判断对象类型及查找原型属性方法。

function Person(){}
Person.prototype.value = 'ok'
...
var p1 = new Person();
p1.__proto__ === Person.prototype // true
p1.__proto__.value // ok
p1.value // ok

2. 原型属性方法的继承、隐藏、覆盖

// 接上例
...
// 继承原型属性方法
// p1的value属性继承Person的原型对象的value属性
p1.value // ok
...
// 隐藏原型属性方法
// 当实例对象的自身的属性、方法名字
// 和原型的属性、方法名字一致时，
// 原型的属性、方法被隐藏（原理见对象属性方法的查找方式）
// 可通过访问原型链访问被隐藏的原型属性方法
p1.value = 'p1'
p1.value // p1
p1.__proto__.value // ok
...
// 覆盖原型属性方法
// 注意：通过覆盖原型属性和方法会影响父类原型对象、
// 所有已实例化的子类，以及未来实例化的子类
var p2 = new Person();
p2.__proto__.value = 'p2'
p2.value               // p2（p2无自身属性value时）
p2.__proto__.value     // p2
p1.value               // p2（p1无自身属性value时）
p1.__proto__.value     // p2
Person.prototype.value // p2
var p3 = new Person();
p3.value               // p2（p3无自身属性value时）

3. 原型链终点是Object.prototype.__proto__

Object.prototype.__proto__ === null

4. 对象属性或方法的查找方式：沿着原型链往上找，直到找到或到Object.prototype.__proto__停止

var O = {},
var F = function(){};
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';
...
// 自身 --> O.__proto__(Object.prototype) --> 找到
console.log(O.a)    // value a
// 自身 --> O.__proto__(Object.prototype) --> O.__proto__.__proto__(null) --> 未找到
console.log(O.b)    // undefined
// 自身 --> F.__proto__(Function.prototype) --> F.__proto__.__proto__(Object.prototype) --> 找到
console.log(F.a)      // value a
// 自身 --> F.__proto__(Function.prototype) --> 找到
console.log(F.b)      // value b

---

三、构造函数（constructor）

1. 构造函数默认首字母大写
2. 构造函数并没有显示返回任何东西。new 操作符会自动创建给定的类型并返回他们，当调用构造函数时，new会自动创建this对象，且类型就是构造函数类型。
3. 可以在构造函数中显示调用return。如果返回的值是一个对象，它会代替新创建的对象实例返回。如果返回的值是一个基本类型，它会被忽略，新创建的实例会被返回。
4. 创建对象的三种模式：构造模式、工厂模式、字面量模式

// 构造模式
function Person1(name) {
     this.name = name;
}
// 工厂模式：return对象
function Person2(name) {
     var obj = new Object();
     obj.name = name;
     return obj;
}
// 字面量模式
function Person3(name) {
     return {
       name: name
     };
}
// 忽略return基本类型，返回对象
function Person4(name) {
     this.name = name;
     return name;
}
...
var p1 = new Person1('Franchen'); // Person {name: 'Franchen'}
var p2 = new Person2('Franchen'); // Object {name: 'Franchen'}
var p3 = new Person3('Franchen'); // Object {name: 'Franchen'}
var p4 = new Person4('Franchen'); // Person {name: 'Franchen'}
...
// 原型对象的构造函数是Function
Person1.constructor === Function // true
// 原型对象的原型的构造函数是其自身
Person1.prototype.constructor === Person1 // true

5. 公有属性、方法，私有属性、方法，静态属性、方法，原型属性、方法理解

function Person(name) {
     // 私有属性
     var six = 'male';
     // 私有方法
     function say(word) { console.log(word); }
     // 公有属性
     this.nickname = name;
     // 公有方法
     this.aboutMe = function(){
       say('Nickname: ' + this.nickname + ', Six: ' + six); 
     };
}
// 静态属性
Person.age = 20;
// 静态方法
Person.getAge = function(){ return this.age; }
// 原型属性
Person.prototype.canWalk = true;
// 原型方法
Person.prototype.walk = function(){ return this.canWalk; }
...
// 原型对象可访问权限
Person.six       // undefined
Person.say()     // Uncaught TypeError: Person.say is not a function
Person.nickname  // undefined
Person.aboutMe() // Uncaught TypeError: Person.aboutMe is not a function
Person.age       // 20
Person.getAge()  // 20
Person.canWalk   // undefined
Person.walk()    // Uncaught TypeError: Person.walk is not a function
...
// 普通对象可访问权限
var p1 = new Person('Franchen');
p1.six       // undefined
p1.say()     // Uncaught TypeError: Person.say is not a function
p1.nickname  // Franchen
p1.aboutMe() // Nickname: Franchen, Six: male
p1.age       // undefined
p1.getAge()  // Uncaught TypeError: p1.getAge is not a function
p1.canWalk   // true
p1.walk()    // true
...
// 静态属性及方法的访问
p1.constructor.age      // 20
p1.constructor.getAge() // 20
// 原型链访问原型属性和方法
p1.__proto__.canWalk    // true
p1.__proto__.walk()     // true
...
// 访问权限总结
 1. 私有属性、方法：仅自身内部可以访问。
 2. 公有属性、方法：仅子类可以访问
 3. 静态属性、方法：自身外部可以访问，自身内部和子类可以间接访问
 4. 原型属性、方法：子类可以访问，自身内部和外部都可以间接访问