了解js原型链

在去了解原型链之前,一定要先搞清楚两个概念,一个是prototype,一个__proto__。耐心往下看哦

1.prototype

    首先什么是prototype?prototype是函数的一个属性,它是一个对象,里面含有两个属性  constructor,__proto__,分别是什么呢??如下图,constructor是一个构造器,它指向自身,而__proto__指向的是对象

    记住:一切对象的根源 - Object.prototype

  

2.__proto__

     __proto__是对象(除去null)所拥有的一个属性,它指向的构造这个函数的原型对象(prototype),取个栗子

function a(){}
console.log(a.__proto__ === Function.prototype)   //true

 应该会有人会问,Object的

console.log(Object.prototype.__proto__ === null) //true

3.原型链

   怎么解释原型链,其实需要靠大家去理解

   写一小段简单的代码,在进行解释

function Person(){}
let p1 = new Persion()

    1.每个函数(通常指构造函数,如Person)都有一个属性:prototype

    2.prototype是一个对象, 里面有constructor , __proto__ 隐式原型

    3.构造函数的原型对象指向当前构造函数 Person.prototype.constructor === Person  

    4.实例对象的隐式原型指向构造函数的显示原型 

               p1.__proto__ === Person.prototype 

    5.在构造函数显示原型中添加的方法,所有的实例对象共享 

    6.访问属性和方法,是基于原型连进行访问 在当前的实例对象去找--》构造函数的原型 ==》.... =》 Object的原型 

      

   光看这几句话会很干,可以看看下面的例子

4.简单的原型链的题及其解释

       var F = function(){}
        F.prototype.b = function (){            
          console.log('b()');}       
        Function.prototype.c = function () {    
          console.log('c()');}       
        Object.prototype.a = function () {      
          console.log('a()')   
        };       
        var f = new F();      
        F.a();      
        F.b();     
        F.c();         
        f.a();        
        f.b();      
        f.c(); 

    这道题完全就是和原型相关,如果你能准确的说出答案,那么原型和原型链的理解基本就是明白的了,做这道题的关键需要分 清楚原型链的访问(实例对象直接访问构造函数的显示原型的函数)

   画一张图就能很清楚的看出答案,话不多说,看图

   看完图之后,可以看出原型链分为两条 - 一条是红色,一条是绿色,原型链上的方法,实例对象都是可以访问的

    F.b(),报错,访问F的b方法,应该为F.prototype.b(),记住一句就是实例对象可以直接访问构造函数显示原型的方法

    f.c(), 报错,c并不是在f的原型链上面,而是在F的原型链上

5.Object和Function之间的关系

     第一,万事万物皆对象   

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

  然后,js的所有类都是Function的实例,也是Object的派生类,Object对象直接继承Function对象

 console.log(Object.constructor === Funciton)  //true
 console.log(Object instanceof Function) //true
 console.log(Function instanceof Object)//true 
 console.log(Object.__proto__  === Function.__proto__) //true       
 console.log(Object.__proto__ === Function.prototype); //true 
 console.log(Function.__proto__ === Function.prototype); //true

也就是说可以理解为对象其实也是由函数构造,Object其实也是个函数,而任何函数都是Function的实例对象(Object.__proto__ === Function.prototype),而函数自己构造了自己(Function.__proto__ === Function.prototype),也来看图理解

但是,敲黑板,不要进入一个误区,如果说一切对象都能访问到Object的prototype里面的方法,像hasOwnProperty,toString,valueOf,toLocaleString等等,那是不是对象都可以访问到在函数原型的方法,答案是,no. 原因又回到了原型链,大家不要进入误区,值得注意的是,原型链的指向,最后指向了Object.prototype而不是Object.__proto__,Object.prototype.__proto__ === null

所以原型链只需要要死死的记住二句话就行了,1.函数的实例对象的隐式原型(__proto__)指向的构造函数的原型对象(prototype),2.所有的最后都指向了对象的显示原型(prototype)

哈哈,终于写完了,点个赞吧

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值