iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >js中class类、super和extends关键词的示例分析
  • 693
分享到

js中class类、super和extends关键词的示例分析

2023-06-20 20:06:28 693人浏览 薄情痞子
摘要

小编给大家分享一下js中class类、super和extends关键词的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!正文1.es6之前创建对象先来看下e

小编给大家分享一下js中class类、super和extends关键词的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

正文

1.es6之前创建对象

先来看下es6之前我们要想创建一个对象,只能通过构造函数的方式来创建,将静态方法添加在原型上面使得每一个实例能够调用该方法。

function Person(name, age) {            this.name = name            this.age = age            Person.prototype.sayHello = function () {                return "hello," + this.name + ",早上好"            }        }        let person = new Person("serendipity", 18)        console.log(person.sayHello())//hello,serendipity,早上好        console.log(person instanceof Person);//true        console.log(person instanceof Object);//true

2.es6之后class的声明

类是用于创建对象的模板,他们用代码封装数据以处理该数据。js中的 class 类建立在原型之上,但也具有某些语法和语义与ES5类相似语义共享。

实际上,类是一种特殊的函数,就像定义函数声明和函数表达式一样,类的语法也有两个部分组成:类声明和类表达式。

class Person {            constructor(name, age) {//自有属性,该属性出现在实例上,只能在类的构造器或者方法内部进行创建                this.name = name                this.age = age            }            sayHello() {//等价于Perosn.prototype.sayHello                return `hello,${this.name},早上好`            }        }        let person = new Person("serendipity", 18)        console.log(person.sayHello());//hello,serendipity,早上好        console.log(person instanceof Person);//true        console.log(person instanceof Object);//true        console.log(typeof Person);//function        console.log(typeof Person.prototype.sayHello);//function

类声明允许在class中使用 constructor 方法定义一个构造器,而不需要定义专门的构造方法来当构造器使用。

class 类的语法与普通es5之前的函数语法相似,但是还存在一些特性需要注意:

  (1)类的声明不会被提升,类的声明行为和 let 相似,因此执行时类会存在暂时性死区;

  (2)类中所有代码自动运行在严格模式下,且改严格模式无法退出

  (3) 类中所有方法都是不可枚举的,普通自定义方法只有通过 object.defineProperty() 才能将方法定义为不可枚举

  (4)类中的所有方法内部都没有 [[construct]] ,因此使用new 来调用他们会抛出错误

  (5)调用类构造器时不使用 new 会抛出错误

  (6)试图在类的方法内部重写类名会抛出错误

将上面的代码转换为ES5之前的写法如下:

let PersonClass = (function () {            "use strict"            const PersonClass = function (name, age) {                // 判断是否被new调用构造函数                if (typeof new.target === "undefined") {                    throw new Error("Constructor must be call with new.")                }                this.name = name                this.age = age            }            Object.defineProperty(PersonClass.prototype, "sayHello", {                value: function () {                    if (typeof new.target !== "undefined") {//保正调用时没有使用new                        throw new Error("Method cannot be called with new.")                    }                    return "hello," + this.name + ",早上好!"                },                enumerable: false,                configurable: true,                writable: true            })            return PersonClass        })()        var personClass = new PersonClass("serendipity", 18)        console.log(personClass.name);//serendipity        console.log(personClass.sayHello());///hello,serendipity,早上好!

两个PersonClass 声明,一个在外部作用域的 let 声明,另一个在立即执行函数内部的 const 声明,这就是为何类的方法不能对类名进行重写,而类的外部的代码则被允许。同时,只在类的内部类名才被视为使用了const声明,这意味着你可以在外部(相当于let)重写类名,但是不能在类的方法内部这么写。

3.类的继承

ES6之前的继承方式主要通过构造函数和原型链组合的方式来实现继承,具体代码如下:

function Rectangle(length, width) {            this.length = length            this.width = width            Rectangle.prototype.getArea = function () {                return this.length * this.width            }        }        function Square(length) {            Rectangle.call(this, length, length)        }        Square.prototype = Object.create(Rectangle.prototype, {            constructor: {                value: Square,                enumerble: true,                writeable: true,                configurable: true            }        })        var square = new Square(3)        console.log(square.getArea());//9        console.log(square instanceof Square);//true        console.log(square instanceof Rectangle);//true

上面的代码通过构造函数和原型上面添加静态方法实现了 Rectangle 父类,然后子类 Square 通过 Rectangle.call(this,length,length) 调用了父类的构造函数,Object.create 会在内部创建一个空对象来连接两个原型对象,再手动将 constructor 指向自身。这种方法实现继承代码繁杂且不利用理解,于是ES6 class 类的创建让继承变得更加简单,使用extends 关键字来指定当前类所需要继承的父类,生成的类的原型会自动调整,还可以使用 super() 方法来访问基类的构造器。具体代码如下:

class Rectangle {            constructor(length, width) {                this.length = length                this.width = width            }            getArea() {                return this.length * this.width            }        }        class Square extends Rectangle {            constructor(length) {                super(length, length)            }            getArea() {                return this.length + this.length            }        }        var square = new Square(3)        console.log(square.getArea());//6        console.log(square instanceof Square);//true        console.log(square instanceof Rectangle);//true

上面的代码中 Square 类重写了基类的 getArea() 方法,当派生的子类中函数名和基类中函数同名的时候,派生类的方法会屏蔽基类的方法,同时也可以再子类中getArea () { return super.getArea() }中调用基类的方法进行扩展。

4.继承类的静态成员

静态成员:直接在构造器上添加的额外的方法。例如ES5中在原型上添加的方法就属于静态成员,ES6 class类引入简化了静态成员的创建,只需要在方法与访问器属性的名称前添加 static关键字即可。例如下面的代码用于区分静态方法和实例方法。

function PersonType(name) {        this.name = name;    }    // 静态方法    PersonType.create = function(name) {        return new PersonType(name);    };    // 实例方法    PersonType.prototype.sayName = function() {        console.log(this.name);    };  var person = PersonType.create("Nicholas");

在ES6中要想使用静态成员如下:

class Rectangle {            constructor(length ,width) {                this.length = length                this.width = width            }            getArea() {                return this.length * this.width            }            static create(length,width) {                return new Rectangle(length , width)            }        }        class Square extends Rectangle{            constructor (length){                super(length,length)            }        }        var square =Square.create(3,4)        console.log(square.getArea());//12        console.log(square instanceof Square);//false        console.log(square instanceof Rectangle);//true

上面的代码中,一个新的静态方法 create() 被添加到 Rectangle 类中,通过继承,以Square.create() 的形式存在,并且其行为方式与Rectangle.create() 一样。需要注意静态成员不懂通过实例来访问,始终需要直接调用类自身来访问他们。

以上是“js中class类、super和extends关键词的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!

--结束END--

本文标题: js中class类、super和extends关键词的示例分析

本文链接: https://www.lsjlt.com/news/300011.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js中class类、super和extends关键词的示例分析
    小编给大家分享一下js中class类、super和extends关键词的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!正文1.es6之前创建对象先来看下e...
    99+
    2023-06-20
  • js学习笔记之class类、super和extends关键词
    目录前言1.es6之前创建对象2.es6之后class的声明3.类的继承4.继承类的静态成员写在最后前言 JavaScript 语言在ES6中引入了 class 这一个关键字,在学习...
    99+
    2022-11-12
  • html中tags标签关键词url的示例分析
    这篇文章给大家分享的是有关html中tags标签关键词url的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。新旧tags比较 副本的: /tags/纳税信用堆集/1/...
    99+
    2022-10-19
  • css的class属性中只有词important和warning的示例分析
    这篇文章给大家分享的是有关css的class属性中只有词important和warning的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 通过把两个类选择器链接在一同...
    99+
    2022-10-19
  • html中tags标签关键词url以ID伪静态的示例分析
    这篇文章主要介绍html中tags标签关键词url以ID伪静态的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 1、nginx伪动态划定rewrite ^(.*)...
    99+
    2022-10-19
  • Java线程中关键字和方法的示例分析
    这篇文章主要为大家展示了“Java线程中关键字和方法的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Java线程中关键字和方法的示例分析”这篇文章吧。一、volatile关键字1,vol...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作