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
原文:https://www.cnblogs.com/panda-programmer/p/13028734.html