js面向对象

1.函数的原型链（__ proto__，prototype，constructor ）

• 函数的原型(prototype)，包含2个默认属性：{constructor : ... , __ proto__:window.Object.prototype}
  函数名.prototype.arg1 = "value_arg1" 这样添加后 arg1将与constructor，__proto __平级
  函数名.arg2 = "value_arg2" 这样添加后，arg2将被添加到constructor中。

• 函数的实例，包含一个默认属性{__ proto__ : 函数的原型(prototype)}
  当访问一个函数的实例的属性或方法的时候，浏览器会先在这个函数的实例本身查找有没有这个属性或方法，没有就在它的__ proto__(函数的原型)中查找，如果还没有就继续往__ proto__的__ proto__中查找直到__ proto__ === window.Object.prototype

注意：访问函数实例的属性，不会去constructor中查找，即如果函数名.arg2，函数实例.arg2返回的是undefined，因为constructor也是函数实例的一个属性，且这个属性等于函数本身。

this 关键字并不是指向当前对象的原型对象，this指向的是当前对象的一个实例。

this.属性实际上是把属性实际上是把属性或方法拷贝到每个实例中，有多少个实例就有多少份，而prototype则是通过引用指向，所以在内存中只有一份

注意：一般属性是定义在函数体中，用this. 这样子类和实例都能拿到，同样也都能改变，每个实例有自己的一份。而方法则定义在prototype中，每个实例如果想有自己独立的方法，利用原型链优先查找原则"重写该方法"

函数是对象，只有函数对象有原型，而函数的实例是没有原型的，只有个__ proto__是指向函数的原型。

必须重申，原型链中的方法和属性没有被复制到其他对象——它们被访问需要通过前面所说的“原型链”的方式。上游对象的方法不会复制到下游的对象实例中；下游对象本身虽然没有定义这些方法，但浏览器会通过上溯原型链、从上游对象中找到它们

例如：Array的prototype属性定义了一些方法，所有Array对象都能使用。
如果Array.直接定义一些属性，则Array的实例对象不能直接返回到。

函数的原型中的constructor === 函数本身，即：
Person.prototype.constructor===Person

创建对象一般是在构造器（函数体）中定义属性、在 prototype 属性上定义方法

// 构造器及其属性定义

function Test(a,b,c,d) {
  // 属性定义
    this.a = a
};

// 定义第一个方法

Test.prototype.x = function () { ... }

// 定义第二个方法

Test.prototype.y = function () { ... }

// 等等……

上面代码中的this.a = a 中的this实际上是Test.call(this, "a", "b", "c", "d")方法传进去的。

2.创建对象

• 1> var childObj = Object.create(supObj) 传入一个原型对象，并创建一个基于该原型的新对象，新对象的__ proto__ === supObj

var newObj = Object.create(supObj)实际上执行的是(伪代码)：

function create(){
    newObj.__ proto__ = supObj;
    return newObj
}

childObj重写父类supObj的属性后，该属性的值跟supObj中的该属性值得变化无关。如果没有重写则会随supObj的变化而变化。

• 2> 构造函数的方式：

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}
var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

注意：构造函数千万别忘记new。在strict模式下，this.name = name将报错，因为this绑定为undefined，在非strict模式下，this.name = name不报错，因为this绑定为window，于是无意间创建了全局变量name，并且返回undefined，这个结果更糟糕。

new 函数的实现原理：

function trivialNew(constructor, ...args) {
    var o = {}; // 创建一个对象
    o = Object.create(constructor.prototype); //设置实例的__ proto__

    constructor.call(o, ...args);//传this进去复制构造方法中的函数和变量。
    return o;
}

需要注意的是create()方法与call()方法的顺序，执行create()方法会将o实例的所有非constructor.prototype属性清空。理由如下Object.create()实现原理：

if (!Object.create) {
    Object.create = function (o) {
    function F() {}  //定义了一个隐式的构造函数
    F.prototype = o;
    return new F();  //其实还是通过new来实现的
    };
  }

3> 直接定义创建

　　var Chinese = {
　　　　nation:'中国'
　　};

Chinese相当与一个实例。

3.继承

• 1>

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();

    Child.prototype.constructor = Child;
}

记得在子类中调用父类构造函数Parent.call(this, props)，确保子类能继承父类函数体(构造器函数中)中的属性

inherits上面三行代码跟Object.create()方法一样实际效果都是将Child.prototype的
__ proto__指向Parent.prototype，这样会改变Child构造器指向，使之与Child关联，所以要执行 Child.prototype.constructor = Child;这段代码。

最后来一个ES6的class创建对象。。。。

class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('Hello, ' + this.name + '!');
    }
}
var xiaoming = new Student('小明');
xiaoming.hello();

class继承。。。。

class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name); // 记得用super调用父类的构造方法!
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

总结

三种定义对象的属性的方式

1.定义在造器函数中的，this.x = x 在内置的浏览器代码中，它们是可用于对象实例的成员,通常通过使用new关键字调用构造函数来创建

2.那些直接在构造函数上定义、仅在构造函数上可用的。这些通常仅在内置的浏览器对象中可用，并通过被直接链接到构造函数而不是实例来识别。 例如:直接用函数名.属性

3.那些在构造函数原型上定义、由所有实例和对象类继承的。这些包括在构造函数的原型属性上定义的任何成员，如myConstructor.prototype.x()。