原型、原型链那点儿事儿

一、Object和Function的关系:

刚学JavaScript的时候,看书上说JavaScript中万物皆对象,而javascript中的其他对象都是从Object继承而来,包括内置对象。瞬间觉得Object碉堡了!

后来,又认识了Function,才知道原来Function才是隐藏在幕后的大BOSS,Object只不过是个大师兄。
在这里插入图片描述
从上面可以发现,Function.__proto__ === Function.prototype
因为,Function 也是对象函数,也是通过new Function()创建,所以 Function.__proto__指向Function.prototype。
Object和Function都是JS自带的函数对象,Function比较牛逼点,因为它是Object的构造函数,而且Object的__proto__属性指向Function的prototype,这意味着Object的那点玩意儿还是从它这里继承的。

在这里插入图片描述

Object.constructor === Function; //true
Object.__proto__ === Function.prototype; //true

Function.prototype.duang = function(str){console.log(str+"真duang啊!")};

Object.duang("你的头发");
//你的头发真duang啊!

Object instanceof Function //true

然而后来我又发现“javascript中的其他对象都是从Object继承而来”这句话其实是错的,准
确的说法应该是:“javascript中的其他对象都继承了Object.prototype中的属性和方法”

Function.prototype.duang = function(str){console.log(str+"真duang啊!")};

Object.duang("你的头发");

var of = {};
of.duang("猫咪");

// 你的头发真duang啊!
//Uncaught TypeError: of.duang is not a function(…)(anonymous function) 




Function.prototype.duang = function(str){console.log(str+"真duang啊!")};

Object.prototype.duang = Function.prototype.duang; 

var of = {}; 

of.duang("猫咪"); //猫咪真duang啊!
二、原型与各方面的关系:

在这里插入图片描述


在这里插入图片描述

举例:

function F1 () { 

}

F1.prototype.constractor === F1;

F1.prototype.__proto__ === Object.prototype;

F1.prototype.__proto__.constractor === Object;

F1.prototype.constractor.prototype = F1.prototype;

F1.prototype.__proto__.constructor.prototype === F1.prototype.__proto__ === Object.prototype

这里需要特别注意的是:


1、Object.prototype.__proto__ === null;

 

2、Object.__proto__ === Function.prototype

Object是函数对象,是通过new Function()创建,所以Object.__proto__指向 
Function.prototype。(注意理解这句话!!!)

 

3、Function.__proto__ === Function.prototype
Function 也是对象函数,也是通过new Function()创建,所以 
Function.__proto__指向Function.prototype。

自己是由自己创建的,好像不符合逻辑,但仔细想想,现实世界也有些类似,你是 
怎么来的,你妈生的,你妈怎么来的,你姥姥生的,……类人猿进化来的,那类人 
猿从哪来,一直追溯下去……,就是无,(NULL生万物)
正如《道德经》里所说“无,名天地之始”。

 

4、Function.prototype.__proto__ === Object.prototype

其实这一点我也有点困惑,不过也可以试着解释一下。
Function.prototype是个函数对象,理论上他的__proto__应该指向 
Function.prototype,就是他自己,自己指向自己,没有意义。
JS一直强调万物皆对象,函数对象也是对象,给他认个祖宗,指向 
Object.prototype。Object.prototype.__proto__ === null,保证原型链能够正 
常结束。
三. JS原型链与instanceof底层原理

instanceof的判断逻辑是: 从当前引用的proto一层一层顺着原型链往上找,能否找到对应的prototype。找到了就返回true,否则返回false

参考链接:https://www.jianshu.com/p/6c99d3678283

四. 原型链完整图:

在这里插入图片描述

  • 任何对象都有__proto__属性,构造函数也是对象,所以也有__proto__属性;
  • 构造函数具有protoType属性;

注意:

  1. 对象上的 .__proto__一定是去寻找原型对象;
  2. Array、String、Object等是由Function构造出来,即Array.constructor === Function;
  3. Array、String、Object等的 .__proto__是Function.proptype;
  4. Function.proptype.__proto__是Object.prototype;
  5. Object.prototype.__proto__是null,达到了顶峰;

注意:Array、String、Object是JavaScript内置的一些构造函数,我们也可以自定义我们自己的构造函数,比如:

function Fn() {

}

Fn和Array、Object等一样,只不过他们是内置的,因此

Fn.\__proto\__  === Function.prototype
Object.\__proto__ === Function.prototype
Array.\__proto__ === Function.prototype

另外,为什么说JavaScript中函数是一等公民呢?

Function.constructor === Function
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值