• 技术文章 >web前端 >前端问答

    javascript 没有类吗

    青灯夜游青灯夜游2021-07-19 18:34:26原创94

    在ECMAScript6规范之前,JavaScript没有类的概念,仅允许通过构造函数来模拟类,通过原型实现继承。而ECMAScript6后,可以使用class关键字来定义类,使用class关键字定义类的写法更加清晰,更像面向对象的语法。

    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

    JavaScript 是基于对象,但不完全面向对象的编程语言。在 JS 面向对象的编程模式中,有两个核心概念: 对象和类。在 ECMAScript6 规范之前,JavaScript 没有类的概念,仅允许通过构造函数来模拟类,通过原型实现继承。

    在ES6中新增了class关键字用来定义类,使用class关键字定义类的写法更加清晰,更像面向对象的语法。但是可以看作是语法糖,因为它还是构造函数和原型的概念。

    1 类声明

    定义类有2中方式,类声明和类表达式:

    // 类声明
    class Student {}
    // 类表达式
    const Student = class {}

    2 为什么说它是语法糖

    因为类实际上它是一个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

    3 类包含的属性和方法

    类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法,但这些都不是必需的。空的类定义照样有效。

    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 类的继承

    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 其他

    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高级教程

    以上就是javascript 没有类吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript
    上一篇:javascript file对象的方法有哪些 下一篇:javascript的不等于是啥符号
    VIP会员

    相关文章推荐

    • json和javascript对象有什么区别• javascript怎么判断是否包含指定字符串• JavaScript是网页脚本语言吗• javascript怎么将数值转为字符串• javascript的2种变量范围有什么不同• javascript中对象一般由什么组成

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网