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怎么创建类和对象”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注百云主机行业资讯频道。

相关推荐: canvas与svg使用实例分析

这篇文章主要介绍了canvas与svg使用实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇canvas与svg使用实例分析文章都会有所收获，下面我们一起来看看吧。 　　1.canvas画布（位图） 　　2.绘制矢量图 　　不…