JavaScript原型实例分析

魁首哥

作者

JavaScript原型实例分析

这篇文章主要讲解了“JavaScript原型实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript原型实例分析”吧！

先看三个对象

一、构造函数（对象）：

JS中声明函数的三种方式

1.function 函数名(){}声明

2.匿名函数声明 var foo = function () {}

3.构造函数声明 var foo = new Function("形参1","形参2","形参3")。任何函数都可以用

new Function 来创建

functionfn1(name,age){console.log(`我叫${name},我今年${age}岁`);}fn1('小航',19)//定义函数的第二种方式constfn2=function(name,sex){console.log(`我叫${name},性别${sex}`);}fn2('小航','男')fn3('小航','男')//Function也是一个构造函数//上面的方式和下面的fn4声明函数的方式是一致的constfn4=newFunction('name','age','console.log(`我叫${name},性别${sex}`)')//当然还有箭头函数只是写法变了和第一种类似constfn3=(name,sex)=>{console.log(`我叫${name},性别${sex}`);}

当我们用函数去创建对象时，如下Fun就是构造函数。fn()是实例对象

functionFun(){}varfn=newFun()console.log(fn.__proto__===Fun.prototype);//true

并且知道：

1. 任何函数，上面的fn fn1 fn2 fn2都是Fun的实例，而Fun也是构造函数Function的实例，Function是JS内置的对象。

2. 看到上面一段代码，Fun.prototype指代/指向的是原型(对象，后面直接称为原型)。

我们接下来看第二个对象：

二、实例对象

functionfn1(name,age){console.log(`我叫${name},我今年${age}岁`);}constobj1={name:'小航',age:'19'}

知道以下知识点：

1. 只要用new关键字 + 构造函数生成的对象，就是实例对象

2. 即便没有用new + 关键字，而是用比如字面量创建对象，或者是函数直接 function 函数名() {} 这样声明，生成的也是实例对象,如上面代码。

3.记住重要的知识点：所有的实例对象都有__proto__属性，甚至可以去掉实例，改为所有的对象都有__proto__属性。

4. 知道如下代码中,fn 是构造函数Fun的实例对象，并且Fun也是构造函数Function的实例对象。

functionFun(){}varfn=newFun()

得出的结论是：

1. fn实例对象的__proto__属性指向构造函数Fun的属性prototype【原型】

2. 而Fun的实例对象的__proto__属性也指向构造函数的Function的prototype【原型】备注：在这里，prototype既是Fun的属性，而Fun.prototype也是最终的一个地方，目的地，这个目的地叫作原型对象。

//1.fn是Fun()构造函数的实例实例对象的__proto__属性都会指向自身构造函数的prototype属性functionFun(){}varfn=newFun()console.log(fn.__proto__===Fun.prototype);//true//2.Fun函数是Function构造函数的实例因此Fun的__proto__和构造函数Function指向同一个地方console.log(Fun.__proto__===Function.prototype);//true

第一个console对应下图的序号1，第二个console对应下图的序号4

三、原型对象：

知道知识点：

1. 所有的函数都有一个原型对象。比如函数Function，它有原型对象Function.prototype。也有说法叫Function.prototype 为函数Function的伴生对象，意思是函数Function一创建，就有一个陪伴它一起创建的对象叫Function.prototype。而Function自己的身上，又有一个属性叫作prototype，这个属性指向了它的伴生对象。

2. 函数的原型对象身上有一个属性，叫作，constructor，它能够指回构造函数。就好像，构造函数Function通过属性prototype指向了原型对象Function.prototype，而原型对象Function.prototype通过自身的constructor属性指回去。

比如下面的，可以自行验证。

functionfn(){}console.log(fn.prototype);console.log(fn.prototype.constructor===fn);//true

3. 函数的原型对象身上还有一个属性，叫作__proto__属性。浏览器打印出来现在长这样，

[[Prototype]]:Object

原型当中的__proto__指向父类的原型对象prototype，比如下面的代码

下面的意思是函数Person的prototype，这是一个原型对象，它的__proto__属性指向Object父类的prototype，Function也是类似。为什么是这样？

因为既然Person.prototype和Function.prototype都叫作原型对象，都是对象，那么本质都是通过new Object创建的，都是构造函数Object的实例，因此它们也是实例对象，身上也有__proto__属性指向Object父类。

functionPerson(){}console.log(Person.prototype.__proto__===Object.prototype);//trueconsole.log(Function.prototype.__proto__===Object.prototype);//true

对应下图的序号3

记住：

Object是各个对象的根

再看三个属性：

一、prototype:

1. 记住这个属性是函数独有的

下面的代码，fn有prototype，Fun构造函数有prototype，Function下面没写出来，但是也有prototype。

看代码

varfn55=newFunction('age','sex','console.log(`今年${age}性别${sex}`)')console.log(fn55.prototype);console.log(fn55.__proto__===Function.prototype);//true

注意：

1. 上面的fn55是通过new Function创建的一个函数，

2. 函数有prototype

3. 同时fn55也是通过new + Function 创建的一个实例对象，因此也有__proto__，指向Function构造函数的prototype

看下面代码

functionFun(name,age){this.name=name;this.age=age}varfnn=newFun('小航','123')console.log(fnn.prototype);//undefined

注意上面代码：

1. 上面是通过new + Fun 创建了一个实例对象

2. 这里是通过构造函数Fun创建了一个对象fnn，而fnn并不是函数，因此并没有prototype原型对象

二、proto

1. 记得万物都是对象因此万物都有__proto__

2. 构造函数的创建的实例对象，有__proto__，指向构造函数的prototype

functionPerson(name,age){this.name=namethis.age=age}Person.prototype.sayHello=function(){console.log(this.name);}constobj1={name:'小航',age:'19'}constobj2=newObject()obj2.name='焦迈奇'obj2.age='19'console.log(obj1);console.log(obj2);console.log(Person.prototype);constperson1=newPerson('小红',19)constperson2=newPerson('小明',20)console.log(person1.__proto__);console.log(person2.__proto__);console.log(Person.prototype===person1.__proto__);//trueconsole.log(Person.prototype===person2.__proto__);//trueconsole.log(Object.prototype===obj1.__proto__);//trueconsole.log(Object.prototype===obj2.__proto__);//true

3. 函数实例有__proto__，也指向构造函数Function

//2.创建函数的几种方式//定义函数的第一种方式functionfn1(name,age){console.log(`我叫${name},我今年${age}岁`);}fn1('小航',19)//定义函数的第二种方式constfn2=function(name,sex){console.log(`我叫${name},性别${sex}`);}fn2('小航','男')//或者箭头函数constfn3=(name,sex)=>{console.log(`我叫${name},性别${sex}`);}fn3('小航','男')//这三个函数的__proto__等于构造函数Function的prototype//Function也是一个构造函数//上面的三种方式本质和下面的fn4声明函数的方式是一致的//定义函数的第三种方式constfn4=newFunction('name','age','console.log(`我叫${name},性别${sex}`)')//console.log(Function.prototype===fn1.__proto__);//true//console.log(Function.prototype===fn2.__proto__);//true//console.log(Function.prototype===fn3.__proto__);//true//console.log(Function.prototype===fn4.__proto__);//true

4. function Object和 function Function 都是构造函数Function的实例，因此也有__proto__

console.log(Object.__proto__===Function.prototype);//trueconsole.log(Function.__proto__===Function.prototype);//true

5. 原型对象也是对象，因此也有__proto__

functionPerson(){}console.log(Person.prototype.__proto__===Object.prototype);//trueconsole.log(Function.prototype.__proto__===Object.prototype);//true

三、constructor属性

每一个原型对象身上，才有constructor属性

functionfn(){}console.log(fn.prototype);console.log(fn.prototype.constructor===fn);//trueconsole.log(Function.prototype.constructor===Function);//trueconsole.log(Object.prototype.constructor===Object);

一些更加复杂的情况

console.log(obj.__proto__.constructor.__proto__.__proto__.__proto__===null);//null

1. obj.__proto__指向Object.prototype

2. Object.prototype.constructor就是指向Object本身

备注：Object也是构造函数也是Function的实例对象因此下面Object也有__proto__

3. Object.__proto__指向Function.prototype

4. Function.prototype.__proto__指向什么？这个就是[原型对象也是对象]原型对象的__proto__指向什么？指向的是父类的prototype也就是Object.prototype

5. Object.prototype指向什么，就是原型链的终点null 可以下去自行验证