构造函数、实例对象、原型对象

构造函数与实例对象之间的关系

1、实例对象是通过构造函数来创建的——创建的过程叫实例化
2、如何判断对象是不是这个数据类型？
1)对象 instanceof 构造函数的名字（更常用）
2)通过构造器的方式：实例对象.构造器==构造函数的名字

 console.dir(obj);//console.dir显示对象的结构
 console.log(obj.constructor==Person);//true
 console.log(obj.__proto__.constructor==Person);//true
 console.log(obj.__proto__.constructor==Person.prototype.constructor);//true

判断对象是不是属于这种类型的两种方式

 function Animal(name){
     this.name=name;
 }
 var dog=new Animal('dog');
 console.log(dog.constructor==Animal);//true
 console.log(dog instanceof Animal);//true

总结：
构造函数可以实例化对象，其中有一个属性叫prototype，是构造函数的原型对象，构造函数的原型对象prototype中有一个constructor构造器，这个构造器指向的就是自己所在的原型对象所在的构造函数

实例对象的原型对象（__ proto__）指向的是该构造函数的原型对象，构造函数的原型对象prototype中的方法是可以被实例对象直接访问的

原型

实例对象中有__proto__这个属性，叫原型，也是一个对象，可以叫原型对象
这个属性是给浏览器使用的，不是标准的属性

构造函数中有prototype这个属性，也是原型对象，这个属性是给程序员使用的，是标准的属性

由于实例对象是通过构造函数来创建的，构造函数中有原型对象prototype，因此实例对象的__proto__指向了构造函数的原型对象prototype

简单的原型写法

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

Person.prototype={
    //手动修改原型的指向
    constructor:Person,
    height:185,
    color:'blueviolet',
    code:function(){
        console.log('coding more and...');
    }
}

var obj=new Person('amethyst');
console.log(obj.name,obj.color);//amethyst blueviolet
obj.code();//coding more and...

原型添加方法、属性解决数据共享问题

通过原型添加方法，解决数据共享，节省内存空间

不仅方法可以共享，属性也可以共享
需要共享的数据写在原型中，不需要共享的数据写在构造函数中

function Person(name){
    this.name=name;
}
//方法
Person.prototype.code=function(){
    console.log('love coding');
}
//属性
Person.prototype.color='blueviolet';

var obj1=new Person('amethyst');
var obj2=new Person('lanlan');
console.log(obj1.code==obj2.code);//true
console.log(obj1.color);//blueviolet
obj1.code();//love coding

原型中的方法相互访问

实例对象的方法是可以相互访问的

function Person(name){
    this.name=name;
    this.code=function(){
        console.log('love coding');
    }
    this.play=function(){
        console.log('code more,play less...');
        this.code();
    }
}

var obj=new Person('amethyst');
obj.play();//code more,play less... love coding

原型对象中的方法也是可以相互访问的

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

 Person.prototype.code=function(){
     console.log('love coding');
 }
 Person.prototype.play=function(){
     console.log('code more,play less...');
     this.code();
 }

 var obj=new Person('amethyst');
 obj.play();//code more,play less... love coding

实例对象使用属性和方法的层层搜索

实例对象使用的属性或者方法，找到了直接使用，找不到则去找实例对象的__proto__指向的原型对象protootype中去找，找到了则使用，找不到则报错

function Person(name){
    this.name=name;
    this.code=function(){
        console.log('构造方法中的code');
    }
}
Person.prototype.code=function(){
    console.log('原型对象中的code');
}
var obj=new Person('amethyst');
obj.code();//构造方法中的code

为内置对象添加原型方法

除了自定义的对象外，我们也可以为系统的对象添加方法，相当于改变源码

String.prototype.sayHi=function(){
    console.log('Hi~'+this);
}
var str="amethyst";
str.sayHi();//Hi~amethyst

原型链

原型链是一种关系，实例对象和原型对象之间的关系，关系是通过原型__proto__来联系的

如果想要使用一些属性和方法，并且属性的值在每个对象中都是一样的，方法在每个对象中的操作也都是一样，那么，为了共享数据、节省内存空间，是可以把属性和方法通过原型的方式进行赋值的

改变原型的指向

构造函数中的this是实例对象，原型对象方法中的this是实例对象

function Person(name){
    this.name=name;
    console.log(this);//输出实例对象per
}

Person.prototype.code=function(){
    console.log(this);//输出实例对象per
}

var per=new Person('amethyst');
per.code();

如果原型对象指向改变了，那么就应该在改变指向之后添加原型方法

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

Person.prototype.eat=function(){
    console.log('eat less');
}

function Student(name){
    this.name=name;
}
// //student的原型对象中添加方法——先在原型中添加方法
// Student.prototype.study=function(){
//     console.log('study more');
// }

//student的原型，指向了一个person的实例对象
Student.prototype=new Person('cloud');

var stu=new Student('amethyst');
// stu.study();//报错
stu.eat();//eat less


//student的原型对象中添加方法——后在原型中添加方法
Student.prototype.study=function(){
    console.log('study more');
}
stu.study();//study more
stu.eat();//eat less

实例对象的原型__proto__指向的是该对象所在的构造函数的原型对象
构造函数的原型对象prototype如果改变了，实例对象的原型__proto__也会发生改变

原型的指向是可以改变的，实例对象和原型对象之间的关系是通过__proto__联系起来的，这个关系就是原型链

原型最终指向

原型链最终的指向是Object的prototype的__proto__

<div id='root'>div>
<script>
    var obj=document.querySelector('#root');
    console.dir(obj);
script>

divObj的 __ proto__——>HTMLDivElement.prototype
的__proto__——>HTMLElement.prototype
的__proto__——>Element.prototype
的__proto__——>Node.prototype
的__proto__——>EventTarget.prototype
的__proto__——>Object.prototype
的__proto__是null