学JS的心路历程 - JS的Class

没错,你没有看错,虽然前面说JS是原型继承,但在ES6以后新增了class关键字!!!

不过底层实作仍然是以原型继承方式进行,所以基本上算是一个语法糖。

今天我们就来看一下如何使用吧!

class

首先先来看一个最简单的class例子。

class Person{

constructor(val){

this.age = val;

}

say(){

return“Hi!”;

}

}

var Jason = new Person(29);

Jason instanceof Person;//true

Jason.age;//29

Jason.say();//“Hi!”

在类别(class)中可以明确定义一个建构式函式,会在建立新的Person物件时被呼叫,在类别主体内也能直接新增方法。

当然我们也可以用原本的原型继承来写。

function Person(val){

this.age = val;

}

Person.prototype.say =“HI!”;

var Jason = new Person(29);

但是,要注意如果用类别的话要注意Hoisting的问题!!

var Jason = new Person(29);//ReferenceError: Person is not defined

class Person{

constructor(val){

this.age = val;

}

say(){

return“Hi!”;

}

}

静态方法Static methods

一个类别的静态方法,不需要被实例化就可以被呼叫,不过也无法被实例化的新物件使用,也就是只能类别层级使用(vmwork)。

class Person{

constructor(val){

this.age = val;

}

say(){

return“Hi!”;

}

static evilThink(){

return“I want steal somthing”

}

}

var Jason = new Person(29);

“evilThink”in Jason;//false

Person.evilThink();//“I want steal somthing”

用原型继承可以这样写。

function Person(val){

this.age = val;

}

Person.evilThink = function(){

return“I want steal somthing”

}

Person.prototype.say = function(){

return“HI!”;

}

var Jason = new Person(29);

“evilThink”in Jason;//false

Person.evilThink();//“I want steal somthing”

extends建立子类别

可以用extends建立子类别。

class Person{

constructor(age,weight){

this.age = age;

this.weight = weight;

}

say(){

return“Hi!”;

}

}

class trickyMan extends Person{

say(){

return“R~”

}

}

var Jason = new trickyMan(29,96);

Jason instanceof Person;//true

Jason instanceof trickyMan;//true

Jason.say();//“R~”

用原型继承则是这样写。

function Person(age,weight){

this.age = age;

this.weight = weight;

}

Person.prototype.say = function(){

return“HI!”;

}

function tricky(){}

tricky.prototype.say = function(){

return“R~”;

}

var Jason = new tricky(29);

Jason.say();//“R~”

super呼叫父类别

如果要在子类别呼叫父类别可以用super。

class Person{

constructor(age,weight){

this.age = age;

this.weight = weight;

}

say(){

return“Hi!”;

}

}

class trickyMan extends Person{

say(){

return super.say();

}

}

var Jason = new trickyMan(29,96);

Jason.say();//“HI!”

如果用原型继承来写的话。

function Person(age,weight){

this.age = age;

this.weight = weight;

}

Person.prototype.say = function(){

return“HI!”;

}

function tricky(){}

tricky.prototype.say = function(){

return Person.prototype.say()

}

var Jason = new tricky(29);

Jason.say();//“HI!”

以上就是class的用法,一样如果有错误及来源未附上也欢迎留言指正,那么我们明天见(leafor)。

原文地址:https://www.cnblogs.com/lannyQ-Q/p/10153831.html

时间: 2024-11-05 20:35:59

学JS的心路历程 - JS的Class的相关文章

学JS的心路历程-JS支持面向对象?(一)

昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特色,封装.继承及多态,这三个都是抽象的概念. 其中继承这个抽象的概念,是为了避免多个类别间重复定义了相同行为与实作.基本上有两种实作的方式可以实现,「原型继承」与「类别继承」. 这两者分别的特色如下. 类别继承classical inheritance: 可以从同一个类别(class)中实例多个物件

学JS的心路历程 -非同步执行

JS是单线程的语言,也就是说同一时间只会执行一行程序,所以如果一段程序执行过久就会造成阻塞(blocking)的现象,必须等到它结束后才能执行下一段程序. 举个例子来说,如果我们今天要买便当,但是老板说要十分钟才会好,那难道我们这十分钟内都不能做任何事情吗? 当然不是,JS本身有非同步执行的功能,也是就说我们会先跟这个函式说,你先到旁边继续跑,好了在「回来呼叫」我,我先继续跑其他程序. 有没有看到熟悉的关键字「回来呼叫」,没错非同步执行基本上都是利用callback达成. 举个例子来说,我们今天

学JS的心路历程-函式(五)箭头函式

箭头函式arrow function 为了能够以更简短的方式建立函式,ES6变推出了箭头函式. 用说明的可能会不太懂,我们先拿之前的数组排序例子来看: var arr = [2,1,6,12,3,77,100,4]: arr.sort(function(a,b){ return a - b: }): arr.sort()经过箭头函式的修改后: var arr = [2,1,6,12,3,77,100,4]: arr.sort((a,b)=> a-b): 是不是简洁许多了! 现在让我们一步一步来看

React+Immutable.js的心路历程

这段时间做的项目开发中用的是React+Redux+ImmutableJs+Es6开发,总结了immutable.js的相关使用姿势: Immutable Data 顾名思义是指一旦被创造后,就不可以被改变的数据.可以通过使用Immutable Data,可以让我们更容易的去处理缓存.回退.数据变化检测等问题,简化我们的开发. 我们知道 react.js很著名的就是它处理dom的做法,它是通过Virtual Dom来查看diff,然后再改动需要改动的Dom.但是有个问题当state更新时,如果数

学习JS的心路历程-声明

变量 在程序中将一个值指定(assign)给一个符号式的容器(symbolic container),叫做一个变量(variable). 声明在JS中目前提供了三种声明方式: var 声明一个变量,可选择是否给予一个初始值. 作用范围(scope)于该函式之内:但是如果在函式外声明,其作用范围则为全局性(global). var price = 10: price = price * 2: console.log(price): let(ES6新增) 声明一个内存块范围(scope)内的本地变量

学习JS的心路历程-范围Scope和提升(Hoisting)

在上一篇提到了JS有三种声明变量的方式,分别是var.const及let,var和const let最大区别就是范围(scope)的限制.所以在这一篇我们会详谈何谓范围链及他们的复写优先级. 范围Scope 我们先来看一个例子: var globalVar = 'global': function scopeFun(){ globalVar ="change in scopeFun": console.log("1.",globalVar)://1.change i

学习JS的心路历程-参数的传递(下)

今天我们要来探讨JS到底是透过何种参数传递方式呢? 废话不多说,上示例!! 我们先声明原始型别和物件型别来看看两者是否会有不一样的差异: var myStr = 'Hola': var myObj = {name:'Ann'}: 再来,声明另一个变量去复制他们: var myStr = 'Hola': var myObj = {name:'Ann'}: var copyStr = myStr: var copyObj = myObj: 然后,去修改复制过的变量内容并印出所有作比较: var my

Angular Material串串学客户端开发 2 - Node.js模块加载机制Require()

题外话解一下博客标题,因为第一篇文章评论中,有人质疑离题很远,说了半天和Angular Material没有半毛关系.其实我的的中心在后半句<串串学客户端开发>. require() 不要把这里的Require()和RequireJS混为一谈.不过有意思的是,Typescript的模块定义,甚至同时支持这两种模块机制. 导入和使用外部模块,只是简单的一句require(),看看angular/material/docs下的编译文件gulpfile.js的代码片段.对模块导入和使用有个直观的感觉

关于ajaxfileupload.js上传图片使用历程(struts2)

因为要使用上传图片功能,附加图片的描述信息, 而传统的<s: file/>由于一些限制在这个小模块中无法使用, 于是搜到了使用ajaxfileupload.js插件进行上传的方法,在使用过程中,jsp,js,struts2 因为自己不熟悉ajax的情况出了许多的小问题,在这里记录一下, 方便自己查看,也希望能帮到他人, 首先说一下思路,通过点击上传直接触发js 的function 调用后台把图片拷贝到指定服务器目录,返回保存的路径到前台,然后跟随图片描述信息一起用ajax异步传到后台.(PS: