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怎么创建类和对象”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
当前题目:JavaScript怎么创建类和对象
地址分享:http://scyanting.com/article/goscsd.html