Javascript面向对象——创建对象、构造函数的原型

其实：JavaScript中的创建类，就是创建一个构造函数，在创建对象时用到new这个关键字，

一、创建对象

1.函数创建对象

function creatObj(name,age){     //手动创建一个对象     var obj={}          //为对象添加属性     obj.name=name     obj.age=age     obj.sayHi=function(){       console.log("hello world!")       }     //返回对象     return obj }  //调用方法创建不同对象 var obj1=creatObj("小明",18) var obj2=creatObj("小花",20)  

2.自定义构造函数创建对象

构造函数使用

1、构造函数和普通函数没有区别，只是在调用是和new一起使用

2、书写构造函数时，函数首字母大写

​ =>当看到首字母大写时就知道要用new关节字去调用

3、调用时要用new关键字

​ =>如果没有就不会自动创建对象、不会自动返回对象，也不能用this

function CreatObj(name,age){     //构造函数首字母大写     //自动创建一个对象       //为对象添加属性     this.name=name       //this代表了指向调用的对象     this.age=age     this.什么=什么     this.obj.sayHi=function(){       console.log("hello world!")       }     //自动返回对象  }  //调用方法创建不同对象 var obj1=new creatObj("小明",18)     //加了一个new var obj2=new creatObj("小花",20) 

二、构造函数的原型（prototype）

定义：每一个函数天生自带的属性，叫做prototype，是一个对象

​ =>既然prototype是一个对象，我们就可以使用操作对象的语法，向里面添加内容

作用：当函数里面没有想调用的属性或方法时，就会去函数的原型里面去找。

不合理性：如果把方法直接写在函数体里面时（如上一个例子所示），每创建一个对象时都会从新创建一个方法。（造成资源浪费）

解决办法：使用函数原型，如果把方法放在原型里面后，不同对象创建的方法都是同一个方法。

//格式：构造函数.prototype.方法名=function(){    }  //为Creatobj的原型添加方法 Creatobj.prototype.sayHi=function(){     consle.log("hello world!") }  function Creatobj(name,age){     //构造函数首字母大写     //自动创建一个对象       //为对象添加属性     this.name=name       //this代表了指向调用的对象     this.age=age     this.什么=什么     //自动返回对象  }  //调用方法创建不同对象 var obj1=new creatObj("小明",18)     //加了一个new var obj2=new creatObj("小花",20)  //调用Creatobj里原型的方法  obj1.sayHi() //可以正常调用 

1.对象自带的方法（__proto__）

概念：每个对象天生自带属性__proto__，指向构造函数是prototype，当访问对象成员时先在自己身上找不到再去找__proto__

//构造函数 function Person(){  }  //给Person的原型赋值 Person.prototype.a=100 Person.prototype.say=function(){     console.log("hello") }  //创建两个对象 var p1=new Person() var p2=new Person()  //判断对象的里 console.log(p1.__proto__===Person.prototype) console.log(p2.__proto__===Person.prototype) //结果都为true，  //说明所有对象使用同一个原型 

2.原型链

原型链概念：

1、用__proto__ 串联起来的对象链状结构

2、每一个对象类型都有一个属于自己的原型链

3、作用：为了访问对象成员

访问机制

当你需要访问对象的成员的时候

首先在自己身上查找，如果有直接使用

如果没有，会自动去__proto__ 上查找

如果还没有，会再去__proto__ 上查找

直到objiect.prototype都没有，那么返回undefined

//构造函数 function Person(){ }  //给Person的原型赋值 Person.prototype.a=100 Person.prototype.say=function(){     console.log("hello") }  //创建两个对象 var p1=new Person() var p2=new Person() 

看上面代码回答问题

问题1：实例对象的 __proto__ 指向谁？

=>指向所属构造函数的原型prototype

=>p1 所属的构造函数是Person

=>p1. __proto__ 指向Person的prototype

问题2：Person.prototype的 __proto__ 指向谁？

=>Person.prototype所属的构造函数是谁？

=>Person.prototype是个对象数据类型（Object）

=>在JS里所有的Object数据类型都是属于Object这个内置构造函数的

=>Person.prototype的 __proto__ 指向Object.prototype

问题3：Person的 __proto__ 指向谁的？

=>Person是个函数，函数本身就是一个对象，就会有 __proto__

=>在JS里所有的函数都是属于Function这个内置构造函数的实例

=>Person. __proto__的 指向Function.prototype

问题4：Objiect.prototype的 __proto__ 指向谁的？

=>Objiect.prototype是个对象数据类型，所有的对象都是属于Object这个内置构造函数的。

=>注意：Objiect.prototype在JS中是顶级原型，是没有 __proto__

=>Objiect.prototype的 __proto__ 指向null

问题5：Objiect的 __proto__ 指向谁的？

=>Objiect是个内置构造函数，同时是一个函数，也是一个对象

=>在JS里所有的函数都是属于Function这个内置构造函数的实例

=>Objiect的 __proto__ 指向Function.prototype

问题6：Function.prototype的 __proto__ 指向谁的？

=>Function.prototype是对象数据类型

=>在JS里所有的对象都是属于Object这个内置构造函数的实例

=>Function.prototype的 __proto__ 指向Object.prototype

问题7：Function的 __proto__ 指向谁的？

=>Function是个内置构造函数，同时是一个函数，也是一个对象

=>在JS里所有的函数都是属于Function这个内置构造函数的实例

=>Fanction 自己是自己的构造函数

=>Fanction 自己是自己的实例对象

=>Function的 __proto__ 指向Function