js-函数的prototype

全栈程序员-站长 • 2022年7月22日下午11:36 • 未分类 • 阅读 14

大家好，又见面了，我是你们的朋友全栈君。

js-函数的prototype

1、函数的prototype属性

每个函数都有一个prototype属性(是一个object类型数据)，它默认指向一个object空对象（即称为：原型对象）

 console.log(typeof Date.prototype) //object
 console.log(Date.prototype) //如图1所示
 function fun(){ 
   }
 console.log(fun.prototype)   //默认指向一个object空对象(没有我们的属性)

图1
在这里插入图片描述图2

/* Date函数的流程基本就是 首先创建一个Date函数， 然后通过Date.prototype（指向原型对象）向Date函数原型对象中添加很多方法 如下：以函数fun为例 */
 function fun(){ 
   }
 fun.prototype.test = function(){ 
   }
  console.log(fun.prototype)

在这里插入图片描述

原型对象中有一个属性constructor，他指向函数对象

// 原型对象中有一个属性constructor，他指向函数对象
console.log(Date.prototype.constructor === Date)  // true
console.log(fun.prototype.constructor === fun)  // true

2、给原型对象添加属性（一般都是方法）

作用：函数的所有实例对象自动拥有原型中的属性（方法）

/* 给原型对象添加属性（一般都是方法）===》实例对象可以访问 */
 function Fun(){ 
   }
 Fun.prototype.test = function(){ 
   
 console.log('test()')
}
var fun =  new Fun() // 实例化对象
fun.test() //test() 实例对象可以直接访问

3、显式原型与隐式原型

每个函数function都有一个prototype，即显式原型
每个实例对象都有一个__proto__，即隐式原型
对象的隐式原型的值为其对应的构造函数的显式原型的值

/* 每个**函数function**都有一个prototype，即显式原型，默认指向一个object空对象 */
function Fn(){ 
        //内部语句：this.prototype = {}
}
console.log(Fn.prototype)
/* 每个**实例对象**都有一个__proto__，即隐式原型，默认指向一个object空对象 */
var fn =  new Fn() // 实例化对象，内部语句：this.__proto__ = Fn.prototype
console.log(fn.__proto__)

/* 对象的隐式原型的值为其对应的构造函数的显式原型的值，引用地址值相同，指向同一个对象 */
console.log(Fn.prototype === fn.__proto__)   //true


Fn.prototype.test = function(){ 
   
console.log('test()')
}
fn.test()   // test() 对象可以直接访问自己__proto__里面的属性和方法，本质上 对象的__proto__与其构造函数的prototype 指向的是同一个对象