JavaScript怎么创建类和对象

这篇文章主要介绍了JavaScript怎么创建类和对象的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript怎么创建类和对象文章都会有所收获，下面我们一起来看看吧。

1 JS 面向对象

1.1 面向对象编程介绍

面向过程编程

即POP（Process-oriented programming），面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。

面向对象编程

即 OOP（Object Oriented Programming） 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。在面向对象程序开发思想中，每—个对象都是功能中心，具有明确分工。 面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特性： 封装性，继承性，多态性

两者的对比

面向过程：

优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。

缺点：没有面向对象易维护、易复用、易扩展。

面向对象：

优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护

缺点：性能比面向过程低。

1.2 ES6 中的类和对象

对象的介绍

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的：

属性：事物的 特征，在对象中用 属性 来表示（常用名词）

方法：事物的 行为，在对象中用 方法 来表示（常用动词）

类 class 的介绍

在 ES6 中新增加了类的概念，可以使用 class 关键字声明—个类，之后以这个类来实例化对象。

类 抽象了对象的公共部分，它泛指某一大类（class）

对象 特指某一个，通过类实例化一个具体的对象

面向对象的思维特点：

抽取(抽象)对象共用的属性和行为组织(封装)成—个类（模板）

对类进行实例化,获取类的对象

创建类和对象

class ClassName {

    // class body

}

// 创建实例：

let obj = new ClassName();

类的 constructor 构造函数

constructor() 方法是类的构造函数（默认方法），用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法。如果没有显示定义,类内部会自动给我们创建一个 constructor()

// 创建一个学生类

class Student {

   // 类的构造函数

    constructor(uname, age, major) {

        this.uname = uname;

        this.age = age;

        this.major = major;

    }

   // 类中添加方法

   // 直接在类中写方法名和括号即可

    sing() {

        console.log(this.uname + "会唱歌");

    }

}

// 类的实例化——创建对象

let peter = new Student("Peter", 21, "CS");

console.log(peter.uname); // Peter

peter.sing(); // Peter会唱歌

注意：

通过 class 关键字创建类, 类名我们还是习惯性定义首字母大写

类里面有个 constructor 函数,可以接受传递过来的参数,同时返回实例对象

constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数，类也会自动生成这个函数

生成实例 new 不能省略

最后注意语法规范, 创建类：类名后面不要加小括号。生成实例：类名后面加小括号, 构造函数不需要加 function

static 静态成员

给成员属性或成员方法添加 static，该成员就成为静态成员，静态成员只能由该类调用

class Person {

    static eat() {

        console.log('eat');

    }

}

let  p = new Person();

Person.eat(); // eat

p.eat(); // 报错

配合 getter 和 setter

当属性拥有 get/set 特性时，属性就是访问器属性。代表着在访问属性或者写入属性值时，对返回值做附加的操作。而这个操作就是 getter/setter 函数。

getter ： 适用于某个需要动态计算的成员属性值的获取

setter 则是在修改某一属性时所给出的相关提示

class Test {

    constructor(log) {

        this.log = log;

    }

    get latest() {

        console.log('latest 被调用了');

        return this.log;

    }

    set latest(e) {

        console.log('latest 被修改了');

        this.log.push(e);

    }

}

let test = new Test(['a', 'b', 'c']);

// 每次 log 被修改都会给出提示

test.latest = 'd';

// 每次获取 log 的最后一个元素 latest，都能得到最新数据。

console.log(test.latest);

以上输出：

latest 被修改了

latest 被调用了

[ 'a', 'b', 'c', 'd' ]

类的继承

extends 关键字 子类继承父类

super 关键字 用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数

类里面的 this 指向问题：constructor 里面的 this 指向实例对象, 方法里面的 this 指向这个方法的调用者

class Person {

    constructor (uname, age) {

        this.uname =uname;

        this.age = age;

    }

}

class Student extends Person {

    constructor (uname, age, major) {

        // super 将子类的参数传递给父类构造函数，减少代码量

        super(uname, age);

        // 子类可以有自己独有的属性

        this.major = major;

    }

}

let rick = new Student("Rick", 22, "数学");

super 调用父类普通函数

class Parent {

    sayHi() {

        return "Father: hello";

    }

}

class Child extends Parent {

    sayHi() {

        // super 调用父类普通函数  super.sayHi()

        console.log(super.sayHi());

    }

}

let man = new Child();

man.sayHi(); // Father: hello

面向对象案例

类的基本架构：

class Tab {

    constructor(id) {

        // 获取相关元素节点

        // 根据传入的id选择器构建主节点

        this.main = document.querySelector(id);

    }

    // 初始化，绑定各个事件

    init() {}

    // 更新节点，同步整个状态

    updateNode() {}

    // 1. 切换功能

    toggleTab() {}

    // 2. 添加功能

    addTab() {}

    // 3. 删除功能

    removeTab() {}

    // 4. 修改功能

    editTab() {}

}

注意的地方：

在 init() 中绑定事件时，不需要即时执行的话，则事件名后面不加括号。

若需要主节点，则声明一个 that 变量，在 constructor() 里面赋值 that = this。

insertAdjacentHTML() 方法：可以在指定元素的指定位置添加一个节点字符串。（MDN insertAdjacentHTML）

appendChild 不支持追加字符串的子元素，insertAdjacentHTML 支持追加字符串的元素

node 是某一个节点，在其上绑定节点的时候需要提前判断该节点存在再绑定事件，可使用 node && node.click()。

自动执行某事件而不需要手动触发，使用 node.click()、node.blur() 等等。

双击事件：ondblick。

双击禁止选中文字：

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

1

双击禁止选中文字（CSS做法）：user-select: none;

2 构造函数与原型

2.1 构造函数和原型

概述

在典型的 OOP 的语言中（如 Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6之前， JS 中并没用引入类的概念。

ES6， 全称 ECMAScript 6.0 ，2015.06 发版。但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

在 ES6 之前 ，对象不是基于类创建的，而是用一种称为 构建函数 的特殊函数来定义对象和它们的特征。

构造函数

在 JS 中，使用构造函数时要注意以下两点：

构造函数用于创建某一类对象，其首字母要大写

构造函数要和 new 一起使用才有意义

new 在执行时会做四件事情：

在内存中创建一个新的空对象。

让 this 指向这个新的对象。

执行构造函数里面的代码，给这个新对象添加属性和方法。

返回这个新对象（所以构造函数里面不需要 return）。

静态成员和实例成员

JS的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的 this 上添加。

通过这两种方式添加的成员，就分别称为 静态成员 和 实例成员。

静态成员：在构造函数本上添加的成员称为 静态成员，只能由构造函数本身来访问

实例成员：在构造函数内部创建的对象成员称为 实例成员，只能由实例化的对象来访问

function Human(uname, age) {

    this.uname = uname;  //实例成员

    this.age = age;  //实例成员

}

Human.x = 10; // 静态成员

let rick = new Human("rick", 35);

// console.log(rick.x); // 实例化的对象不能调用静态成员

console.log(Human.x); // 静态成员只能由构造函数本身来访问

关于“JavaScript怎么创建类和对象”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“JavaScript怎么创建类和对象”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。