分享更有价值
被信任是一种快乐

es6 class是不是语法糖

文章页正文上

这篇文章主要介绍了es6 class是不是语法糖的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es6 class是不是语法糖文章都会有所收获,下面我们一起来看看吧。 class是语法糖。原因:class是基于原型继承的实现,对语言的功能并没有什么影响,只是方便了语法的书写及阅读;class的本质是function,能够让对象原型的写法更加清晰,更像面向对象编程的语法。本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。ES6 class类——语法糖class (类)作为对象的模板被引入,可以通过 class 关键字定义类。它的本质是函数(function),可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。它的class和别的语言不一样,它依旧是基于原型继承的实现,对语言的功能并没有影响,只是方便了你的书写及阅读为什么说ES6的class是语法糖我们带着问题去阅读下文:为什么说ES6的class是语法糖?class是原型的语法糖吗?那又是如何使用原型来实现class这一语法糖的呢?1. 基于Prototype的OOP先来看一个prototype的例子:

functionPerson(name,sex){
	this.name=name
	this.sex=sex
}

functionMan(name){
	this.name=name
}

Man.prototype=newPerson('','male')

letJy=newMan('Jy')

console.log(Jy.name,Jy.sex)//Jy,male

这是我们使用原型的一个很简单的例子,Person具有名字和性别,Man是一个性别为男的Person,Jy是一个Man。我们先记住这一个例子,下面将使用class重写这个例子。Tips: new, this等是Brendan Eich使之更像Java的OOP而加上的,有兴趣的读者可以自行查阅相关信息。2. ES6 Class的OOP

classPerson{
	constructor(name,sex){
		this.name=name
		this.sex=sex
	}
}

classManextendsPerson{
	constructor(name){
		super('','male')
		this.name=name
	}
}

letJy=newMan('Jy')

console.log(Jy.name,Jy.sex)//Jy,'male'

我们通过重写这个例子,采用了class、constructor、extends、super 这些单词,接下来就具体来说说ES6规范中对它们做了什么。3. 使用Prototype实现的Class OOP(ES6规范)在ES6之前,JS对象其实就是属性的集合,而属性则是一组键值对(key, value),key可以是String or Symbol, value包括数据属性特征值和访问器特征值。你说普通的属性还好,不还有对象下面的方法吗?怎么就变成了属性的集合呢?其实在ES5规范中出现的method的定义是“function that is the value of a property”,是对象的函数属性而已,不能称之为方法,直到ES6出现,规范中才有Method Definitions。我们能想到的在ES3有关OOP的东西: prototype、new、 this、 constructor、 instanceof, 甚至不是规范的 __proto__ 属性。所幸的是在ES5中我们增加了很多方法来补全它,使之完备:Object.definePropertyObject.freezeObject.createObject.getPrototypeOfObject.setPrototypeOfisPrototypeOf……再来看一段免费云主机、域名代码:

letobj={
	name:'Jy',
	speak(){//Note:it'snotspeak:function(){}
		console.log(this.name,super.name)
	}
}

obj.speak()//Jy,undefined

Object.setPrototypeOf(obj,{name:'super'})

obj.speak()//Jy,super

letspeak=obj.speak
speak()//undefined,super

obj.speak在ES6中定义已经是Method了,它具有属性[[homeObject]],homeObject指向方法被调用的对象(代码中指的是obj), 它是绑定在对象中的Internal Slots,也就是你不能去修改,就相当于写死了。那么homeObject有什么用呢?它跟super密切相关,当解析到super这一关键字的时候就会找homeObject的prototype。简单来说,总结为下面两条公式:let homeObj = Method[[HomeObject]] = objsuper = Object.getPrototypeOf(homeObj)Note: homeObject是静态绑定在internal slots中的,而super是动态查找的。讲完super,我们来讲讲extends和constructor

classAextendsB{}

classAextendsB{
	constructor(...args){
		super(args)
	}
}

classCextendsnull{}

extends主要做了以下两件事:Object.setPrototypeOf(A, B)Object.setPrototypeOf(A.prototype, B.prototype)如果父类是null, 则执行Object.setPrototypeOf(C.prototype, null)上述代码的第一和第二部分区别在于有没有显示声明constructor, 那么这两段代码是否等价呢?答案是等价的。规范中就是这么定义的:代码的第三部分是继承了null, 它不会报语法错误,但是我们无法new一个C出来,原因是new的时候会调用null的constructor,而null没有constructor。看到这里,ES6的class oop, 规范声明都是使用原型来操作,所以我们是不是可以说class是原型的语法糖了?4. babel编译后的class我们实际项目中多采用babel来编译ES6、7的代码,所以这节我们就来分析以下babel编译后的代码,其中会省略一些报错、类型检测的一些相关代码来更好地呈现使用原型来实现OOP的主题。编译前:

classAextendsB{}

console.log(newA)

编译后:

"usestrict";

function_getPrototypeOf(o){
_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function_getPrototypeOf(o){
returno.__proto__||Object.getPrototypeOf(o);
};
return_getPrototypeOf(o);
}

function_inherits(subClass,superClass){
if(typeofsuperClass!=="function"&&superClass!==null){
thrownewTypeError("Superexpressionmusteitherbenullorafunction");
}
subClass.prototype=Object.create(superClass&&superClass.prototype,{
constructor:{
value:subClass,
writable:true,
configurable:true
}
});
if(superClass)_setPrototypeOf(subClass,superClass);
}

function_setPrototypeOf(o,p){
_setPrototypeOf=Object.setPrototypeOf||function_setPrototypeOf(o,p){
o.__proto__=p;
returno;
};
return_setPrototypeOf(o,p);
}

varA=
/*#__PURE__*/
function(_B){
_inherits(A,_B);

functionA(){

return_getPrototypeOf(A).apply(this,arguments);
}

returnA;
}(B);

console.log(newA());

我们重点看_inherits 方法,跟我们上述说的extends做的两件事是一样的:Object.setPrototypeOf(subClass, superClass)Object.setPrototypeOf(subClass.prototype, superClass.prototype)只不过它采用的是Object.create方法,这两个方法的区别可以去MDN上查看。再看function A内部,其实就是执行了B的构造器函数来达到super(arguments)的效果, 这个与规范:如果没有显示声明constructor会自动加上constructor是一致的。关于“es6 class是不是语法糖”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“es6 class是不是语法糖”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注云技术行业资讯频道。

相关推荐: Vue子组件属性怎么赋值

这篇文章主要介绍了Vue子组件属性怎么赋值的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue子组件属性怎么赋值文章都会有所收获,下面我们一起来看看吧。 Vue 子组件Vue 应用由一个或多个组件构成。Vue 组件遵循一种层次结构…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册