首页 > 其他 > 详细

通过class进一步理解原型和原型链

时间:2020-06-02 09:12:51      阅读:36      评论:0      收藏:0      [点我收藏+]

js里没有类的概念,但我们在编程中还想采用类的这种思想。我们之前的做法是声明一个函数,在用new关键字去创建这个函数的实例,这样我们就得到了一个“类”;

function persion(){}
persion.prototype.name = "xiaoming"
let Persion1 = new persion();

  我们把上面创建类的方法也称作构造函数,在es6中,它为我们提供了一个新的语法 class ,可以用class关键字创建一个“类”。

class Persion{
      constructor(name,age){
        this.name = name
        this.age = age
      }
    }
let xiaoming = new Persion("xiaoming",20)
 console.log(xiaoming)

  打印结果如下:

技术分享图片

 

 学习过另一篇原型和原型链的同学看到这里会发现,用class声明的原型和用function声明的原型构造出来的实例是一模一样的,对没错,class实际上就是一个function,是创建类的一个语法糖,和构造函数创建实例一样,在new 一个class实例的时候也发生了下面几件事:创建一个实例,this指向原型本身,并返回this。

我们再来看上面用class原型生成实例的打印结果,Persion实例有隐式属性__proto__,指向了它的原型Persion的prototype,Persion同时也是一个对象,是由Object构造的,最终原型链又指向了Object。

用class我们可以很方便的实现继承,使用extends关键字

    class Persion{
      constructor(name,age){
        this.name = name
        this.age = age
      }
    }
    class Student extends Persion{
      constructor(name,age){
        super(name,age)
      }
    }
    let xiaoming = new Student("xiaoming",20);
    console.log(xiaoming)

  打印结果如下

 

技术分享图片

 

 

我们可以看到,使用extends继承也是可以通过原型链逐级查找到Object对象的。

这时候如果我们在Persion上添加一个方法say,尝试打印继承了Persion的Student原型生成的实例xiaoming的say()方法。

 class Persion{
      constructor(name,age){
        this.name = name
        this.age = age
      }
      say(){
        console.log("hi")
      }
    }
    class Student extends Persion{
      constructor(name,age){
        super(name,age)
      }
    }
    let xiaoming = new Student("xiaoming",20);
    console.log(xiaoming)
    xiaoming.say();//hi

  在控制台看出,xiaoming.say()成功执行了,这就印证了原型链逐级查找的特点,首先xiaoming在自己内部查找say方法,但是没有查到,这时候自动向下继续查找say方法,这时候查到了Persion原型上有这个方法,那么就相当于xiaoming有了say方法

技术分享图片

 

 

总结:1 实例的__proto__===原型的prototype

   2 原型链具有逐级查找特性

     3 xiaoming能调到say方法,persion和people都能调到say方法,这时候可以用xiaoming.hasOwnProperty(‘say’)判断,返回false  

 

ps:补充一个知识点,用 a instanceof b 可以判断a是不是b生成的实例,或者叫b是不是a的原型,只要b在a所处的上游原型链上,就返回true

  举个??:xiaoming instanceof Student  //true
      xiaoming instanceof People  //true

      xiaoming instanceof Object  //true

      xiaoming instanceof Array //false

 

通过class进一步理解原型和原型链

原文:https://www.cnblogs.com/panda-programmer/p/13028734.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!