理解 构造函数 实例化对象 原型对象 原型链 继承 constructor prototype __proto__

1、构造函数是什么

        所谓的构造函数其实就是一个普通的函数前面加了new运算符，其实质也是一个函数，所以构造函数都有函数的prototype属性。

2、实例是什么

        实例就是通过构造函数创建出来的对象。

var M = function () {
	this.name = 'Jane'
} 
var obj = new M()

3、原型是什么

        原型指的就是原型对象，至于是谁的原型对象，需要靠函数的prototype属性和实例的__proto__属性来区别。

        每创建一个函数，该函数都会自动带有一个prototype属性。该属性是一个指针，指向一个对象，该对象称之为原型对象(后期我们可以使用这个原型对象帮助我们在js中实现继承)。

4、原型链是什么

        指从一个实例对象开始往上找，这个实例对象的__proto__属性所指向的则是这个实例对象的原型对象，如果用obj表示这个实例，则原型对象表示为obj.__proto__。同时，这个原型对象顾名思义也是一个对象，而且它也有上一级的原型对象，相对于上一级原型对象而言，它也是一个实例对象，那么它也拥有__proto__属性，它的__proto__属性也指向它的原型对象，后面也以此类推，一直到Object.prototype这个原型为止，Object.prototype为原型链的末尾点。

通过上图第一个红色框出来的属性可看到，obj通过调用两次__proto__属性就已经到达Object，Object是一个构造函数，Object拥有属性prototype，可以指向它的原型。第三次调用的时候已经返回空，表明Object.prototype为原型链的末端。

5、构造函数与实例之间的关系

        如前所述，实例是通过构造函数创建

6、构造函数与原型（对象）之间的关系

        构造函数通过其属性prototype去寻找它关联的原型，如果用M表示构造函数，M.prototype所指的就是它关联的原型对象，而原型对象可以通过构造器constructor来寻找与自身关联的构造函数，所以就有M.prototype.conctructor===M。

7、实例与原型之间的关系

        其实在前面的原型链解释那里就说了实例与原型之间的关系，但是这里也还是赘述一下，因为等下5、6、7点结合来谈。很简单，就一句话可以概括，实例通过它的__proto__属性去寻找它关联的原型对象，所以原型对象又可以表示为obj.__proto__。若用obj.__proto__=obj关联的原型对象，而结合第6点，M.prototype=M关联的原型对象，又因为第5点，obj是M创建的，所以obj关联的对象就是M关联的对象（其实这里可用instanceof来判断实例与构造函数是否引用同一地址，事实是引用了同一地址。后面第9点会讲到instanceof），最终，obj.__proto__===M.prototype为true。这在控制台可验证。

8、原型对象上的属性、方法可以被实例共享，原因看代码演示

var M = function (name) {
    this.name = name
} 
//构造函数原型对象上定义属性和方法
M.prototype.country = 'US'
M.prototype.say=function(){
	console.log("hhh")
}
var obj1 = new M('Jane')
var obj2 = new M('Tom')

 两个同一构造函数的不同实例，可以调用原型对象上的属性和方法，值都一样，所以控制台返回true。

9、instanceof的原理

        首先，通过instanceof能做什么呢？instanceof可以判断实例对象的__proto__属性是否与构造函数的prototype属性指向同一地址，是的话返回true，否则fasle。
        而原型对象上还有上一级的原型对象，上一级原型对象也有对应的构造函数，事实上，实例的__proto__属性与在原型链上的所有构造函数的prototype属性都指向同一个地址，所以有如下的结果。

        需要注意的是，虽然instanceof判断的是实例属性与函数属性的指向问题，但是在使用的时候要注意instanceof 左边是实例，右边是构造函数。

        一句话概括就是用实例对象来判断构造函数与原型对象的构造函数。

10、构造器constructor

 但是想找到与实例直接相关联的构造函数就得用构造器constructor了。使用方法是先通过实例的__proto__属性找到原型对象，再通过原型对象的属性constructor来确定构造函数。

constructor 属性返回对象的构造函数。

返回值是函数的引用，不是函数名：

JavaScript 数组 constructor 属性返回 function Array() { [native code] }

JavaScript 数字 constructor 属性返回 function Number() { [native code] }

JavaScript 字符串 constructor 属性返回 function String() { [native code] }

举例来说，.constructor是在函数声明时候的默认属性。

  我们先来看看下面的代码。

function Foo(){
}
console.log(Foo.prototype.constructor === Foo);//true
var a = new Foo();
console.log(a.constructor === Foo);//true

看起来a.constructor === Foo 为真，意味着a的确有一个.constructor指向Foo的.constructor属性。
但是可能出于不理解，或者很多的误操作，都会导致我们.constructor指向的丢失。如下：

function Foo(){
}
Foo.prototype = {}
var a1 = new Foo();
console.log(a1.constructor === Foo);//false
console.log(a1.constructor === Object);//true

可以看到a1并没有.constructor属性。那是为什么呢。？因为a1没有.constructor属性，他会委托[[prototype]]链上的Foo.prototype。但是新建的Foo.prototype也没有.constructor,所以继续往上找，一直到了顶端的Object.prototype。
再来，为了绝对的保证我的代码可靠，不被一些错误操作，影响我们的执行。

function Foo(){
}
Foo.prototype = {}
var a1 = new Foo();
Object.defineProperty(Foo.prototype, "constructor", {
    enumerable: false,
    writeable:true,
    configureable: true,
    value: Foo // 让.constructor指向Foo
})

查看下面的代码，理解 以上定义

function People(){ 
this.type='人' 
} 
People.prototype.showType=function(){
 alert(this.type); 
} 
var person=new People(); //调用原型对象上面的方法
person.showType();//最后结果弹框弹出人

function Woman(){
    this.sex='女';
    this.age=34;
}
Woman.prototype=new People();
var w=new Woman();
console.log('大家好,我的种类是:'+w.type+",我的年龄是:"+w.age+",我的性别是:"+w.sex);
//输出结果://大家好，我的种类是：人，我的年龄是:34，我的性格是:女//w.type是People上面定义的type



People.prototype // { showType: ƒ () constructor: ƒ People()}
People.prototype.constructor // ƒ People(){ this.type='人' }
People.prototype.constructor==People；//返回true


People.constructor // ƒ Function() { [native code] }
People.constructor.prototype // ƒ () { [native code] }
People.__proto__.  // ƒ () { [native code] }
People.constructor.prototype === People.__proto__  //返回true 


person.constructor // ƒ People(){ this.type='人' }
person.constructor === People // 返回true

person.constructor.prototype //  { showType: ƒ () constructor: ƒ People()}
person.constructor.prototype === Object.getPrototypeOf(person)
person.__proto__ // { showType: ƒ () constructor: ƒ People()}

person.constructor.prototype === person.__proto__ // 返回true
person.__proto__ === People.prototype  // 返回true

解释一下以上代码.以上代码，首先先定义了People构造函数，通过new People()得到实例，会包含一个实例对象type和一个原型属性showType。另外定义一个Woman构造函数，然后情况发生变化，本来构造函数woman的prototype会执行Woman的原型对象，但是我们这里稍有改变，将Woman构造函数的prototype指向了People实例对象覆盖了woman的原型对象。当Woman的实例对象woman去访问type属性时，js首先在woman实例属性中查找，发现没有定义，接着去woman的原型对象上找，woman的原型对象这里已经被我们改成了People实例，那就是去People实例上去找。先找People的实例属性，发现没有type，最后去People的原型对象上去找，终于找到了。这个查找就是这么一级一级的往上查找。

 

 

继承

 

// 让我们从一个函数里创建一个对象o，它自身拥有属性a和b的：
let f = function () {
   this.a = 1;
   this.b = 2;
}
/* 这么写也一样
function f() {
  this.a = 1;
  this.b = 2;
}
*/
let o = new f(); // {a: 1, b: 2}

// 在f函数的原型上定义属性
f.prototype.b = 3;
f.prototype.c = 4;

// 不要在 f 函数的原型上直接定义 f.prototype = {b:3,c:4};这样会直接打破原型链
// o.[[Prototype]] 有属性 b 和 c
//  (其实就是 o.__proto__ 或者 o.constructor.prototype)
// o.[[Prototype]].[[Prototype]] 是 Object.prototype.
// 最后o.[[Prototype]].[[Prototype]].[[Prototype]]是null
// 这就是原型链的末尾，即 null，
// 根据定义，null 就是没有 [[Prototype]]。

// 综上，整个原型链如下: 

// {a:1, b:2} ---> {b:3, c:4} ---> Object.prototype---> null

console.log(o.a); // 1
// a是o的自身属性吗？是的，该属性的值为 1

console.log(o.b); // 2
// b是o的自身属性吗？是的，该属性的值为 2
// 原型上也有一个'b'属性，但是它不会被访问到。
// 这种情况被称为"属性遮蔽 (property shadowing)"

console.log(o.c); // 4
// c是o的自身属性吗？不是，那看看它的原型上有没有
// c是o.[[Prototype]]的属性吗？是的，该属性的值为 4

console.log(o.d); // undefined
// d 是 o 的自身属性吗？不是，那看看它的原型上有没有
// d 是 o.[[Prototype]] 的属性吗？不是，那看看它的原型上有没有
// o.[[Prototype]].[[Prototype]] 为 null，停止搜索
// 找不到 d 属性，返回 undefined

const bar = new f()
const baz = Object.create(f.prototype)

bar // f {a: 1, b: 2}
baz // f {}
baz.b // 3
baz.c // 4


const bax = Object.create({a:1,b:2})
bax //{}
bax.a // 1
bax.b // 2

 

继承：js继承的几种方法：

1. for-in继承：

function Person(){              //父类
     this.name="水煮鱼";
     this.age=18;
}
 
function Son(){                 //子类
}
var p=new Person();
var s=new Son();
for(var k in p){
    s[k]=p[k];
}
console.log(s.name);           //水煮鱼
console.log(s.age);            //18

2.原型继承：

function Human(){
     this.name="香辣虾";
     this.age=21;
}
function Man(){
}
Man.prototype=new Human();
var m=new Man();
console.log(m.name);           //香辣虾
console.log(m.age);            //21

3.经典继承：（Object.create()）

var animal={
      name:"阿咪",
      type:"猫科"
};
var a=Object.create(animal)    //ES5属性
console.log(a.name);           //阿咪
console.log(a.type);           //猫科