JS — 显式原型prototype和隐式原型__proto__

  • Post author:
  • Post category:其他



一、每个函数都有一个

prototype

原型对象属性,叫显式原型,它默认指向一个Object空对象


1、下面代码结果都为

true

function Fn(){}
console.log(typeof Fn.prototype === "object")
console.log(Fn.prototype instanceof Object)

2、既然默认指向一个

Object

空对象,就说明没有我们自己加的属性;

所以,添加一个自己的属性(一般都是加方法,给实例使用):

function Fn(){}
Fn.prototype.test = function(){
	console.log("自己添加的属性")
}
console.log(Fn.prototype)

在这里插入图片描述

两种调用方式:

Fn.prototype.test();
var fn = new Fn();
fn.test();

在这里插入图片描述

3、原型对象

prototype

中有一个

constructor

属性,它指向函数对象本身;

如下代码,打印在函数对象中的

prototype

属性,可以看到有个

constructor

属性,并且它指向了函数对象本身

Fn

function Fn(){}
console.log(Fn.prototype)

在这里插入图片描述

为了证实是指向了函数对象本身,我们执行如下代码,结果为

true

console.log(Fn.prototype.constructor === Fn)

在这里插入图片描述


二、每个实例对象都有一个

__proto__

属性,叫隐式原型

1、实例对象代码:

function Fn(){}
var fn = new Fn();
console.log(fn.__proto__);

在这里插入图片描述


重要总结:

实例对象的隐式原型

__proto__

的值就是其构造函数显式原型

prototype

的值,它俩都指向同一个地址值:原型对象

function Fn(){}   // 这是一个构造函数,js内部处理成了this.prototype = {}
var fn = new Fn();   // 构造函数实例化
console.log(fn.__proto__);   // 实例化对象的__proto__,js内部处理成了this.__proto__ = Fn.prototype
console.log(Fn.prototype);   // 构造函数的prototype
console.log(Fn.prototype === fn.__proto__);   // 结果为true

在这里插入图片描述

以下为上面代码的结构图

在这里插入图片描述



版权声明:本文为qq_21980517原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。