符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
本篇内容主要讲解“javascript中有没有类”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript中有没有类”吧!
10年积累的网站建设、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有独山子免费网站建设让你可以放心的选择与我们合作。
在ECMAScript6规范之前,JavaScript没有类的概念,仅允许通过构造函数来模拟类,通过原型实现继承。而ECMAScript6后,可以使用class关键字来定义类,使用class关键字定义类的写法更加清晰,更像面向对象的语法。
本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。
JavaScript 是基于对象,但不完全面向对象的编程语言。在 JS 面向对象的编程模式中,有两个核心概念: 对象和类。在 ECMAScript6 规范之前,JavaScript 没有类的概念,仅允许通过构造函数来模拟类,通过原型实现继承。
在ES6中新增了class关键字用来定义类,使用class关键字定义类的写法更加清晰,更像面向对象的语法。但是可以看作是语法糖,因为它还是构造函数和原型的概念。
定义类有2中方式,类声明和类表达式:
// 类声明 class Student {} // 类表达式 const Student = class {}
因为类实际上它是一个function,区别在于构造函数是函数作用域,类是块级作用域,类中的方法,都是定义在类的prototype上面,所以文章开头说它还是构造函数和原型的概念:
class Student { take() {} } const a = new Student() console.log(typeof Student) // function console.log(a.take === Student.prototype.take) // true // 同等于 function Student() {} Student.prototype.take = function() {} const a = new Student() console.log(typeof Student) // function console.log(a.take === Student.prototype.take) // true
类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法,但这些都不是必需的。空的类定义照样有效。
class Student { // 实例属性 也可以放在这 // b = 1 // 静态属性 static a = 1 // 构造函数 constructor() { // 实例属性 - 也可以放在类的最顶层 this.b = 1 } // 获取函数 get myName() {} // 设置函数 set myName() {} // 静态方法 不会被实例继承 static show() {} // 方法 take() {} // 私有方法 _take() {} }
3.1 类的构造函数
类的构造函数关键字是constructor,它同等于原型中的prototype.constructor。
如果没有写constructor函数,那么会默认有一个空的constructor函数。
class A { constructor() { this.name = '小明' } } const b = new A() b.constructor === A.prototype.constructor // true
当使用new操作符创建实例时,会调用constructor构造函数。
3.2 类的方法
class Student { // 方法 take() {} }
3.3 类的静态方法
跟类的方法一样,只不过前面加上static关键字。
静态方法不会被实例继承。
父类的静态方法可以被子类继承。
class A { // 静态方法 static show() { console.log('hi') } } class B extends A {} const c = new A() c.show() // c.show is not a function B.show() // hi
3.4 类的私有方法
es6中没有提供这个方法,但是通常都是在方法前面加上下划线来表示。
class A { // 私有方法 _show() { console.log('hi') } }
3.5 取值函数(getter)和存值函数(setter)
在类中有set和get关键词,可以对某个属性设置存值和取值函数,拦截它的存取行为。
class A { constructor () { this.name = '小米' } get name () { return 'get' } set name (val) { console.log('set' + val) } } const b = new A() b.name // get b.name = 123 // set123
4.1 通过extends实现继承
类的继承通过extends关键字。
class A { // 静态方法 static show() { console.log('hi') } } class B extends A {}
4.2 super方法
注意如果子类如果没写constructor构造函数,则会默认有constructor构造函数和super方法,但是如果显性的写了constructor构造函数,那么必须在子类的构造函数中添加super方法,添加之后会调用父类的构造函数并得到父类的属性和方法,如果没有添加super方法则会报ReferenceError错误。
class A { constructor () { this.name = '小米' } show() { console.log('hi') } } class B extends A { constructor () { super() // 如果不写super,则会报ReferenceError错误 } } const c = new B()
super方法中也可以传参
class A { constructor (name) { this.name = name } show() { console.log('hi') } } class B extends A { constructor () { super('小红') } } const c = new B() c.name // 小红
5.1 方法中的this指向
类的方法中如果有this,那么它指向的是类的实例。但是如果将它单独拿出来使用那么会报错。
class A { constructor () { this.name = '小米' } show () { console.log(this.name) } } const b = new A() b.show() // 小米 const { show } = b // Cannot read property 'name' of undefined
解决办法有2种:
1、在构造函数中绑定this
class A { constructor () { this.name = '小米' this.show = this.show.bind(this) } show () { console.log(this.name) } }
2、使用箭头函数
class A { constructor () { this.name = '小米' this.show = () => this } show () { console.log(this.name) } }
5.2 区分是否继承了这个类
区分是否继承了这个类使用Object.getPrototypeOf函数。
class A { constructor () { this.name = '小米' } show() { console.log('hi') } } class B extends A { constructor () { super() } } class C {} Object.getPrototypeOf(B) === A // true 是继承的A类 Object.getPrototypeOf(B) === C // false 没有继承C类
到此,相信大家对“javascript中有没有类”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!