类的语法
class关键字声明,内部使用constructor初始化实例化对象的属性。
class User {
// constructor方法是对属性进行初始化的 接收参数,同样在实例化对象后,对象会自动执行
constructor(name) {
this.name = name;
}
//方法
getName() {
return this.name;
}
}
console.log(typeof User); // function
// 既然是函数的话,我们还有另外一种定义的方式
let F = class {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
};
let user = new User("sunny");
类的内部实现原理
类的本质还是原生js的构造函数,通过constructor构造方法声明的属性是对象的属性,类中定义的其他方法自动存在类的原型中。
对比一下类和构造函数实现的对象:
// 语法糖的结构:结构清晰
// 内部实现与构造函数一样
class User {
// 初始化对象的属性
constructor(name) {
this.name = name;
}
// 在类里面添加方法的方法,会自动添加到类的原型中,并且这些方法不会被遍历,默认特征为false
show() {
console.log(this.name);
}
}
let u = new User("user");
console.log(u); // 与f结构一样
// 类也有自己的原型对象,也有原型对象的属性
console.log(User.prototype.constructor == User);
function Fun(name) {
this.name = name;
}
// 构造函数呢,是我们手动添加的
Fun.prototype.show = function () {
console.log(this.name);
}
let f = new Fun("fun");
console.log(f);
从显示中也可以看出,类方法默认添加在类原型当中并且方法是不可遍历的。
类和构造函数实例化出的对象以及二者的原型均是一样的:
console.log(Object.getOwnPropertyNames(User.prototype));
console.log(Object.getOwnPropertyNames(u));
console.log(Object.getOwnPropertyNames(Fun.prototype));
console.log(Object.getOwnPropertyNames(f));
在类中设置对象的属性和方法
对象属性和方法都有两种设置的形式。
属性:属性的声明可以在constructor方法内也可在方法外,通常我们设置在构造方法内
方法:类方法通常在构造方法外声明,也可以在构造方法内声明。
class User {
site = "www.baidu.com";
constructor(name) {
this.name = name;
this.only = function onlyMe() {
console.log("对象自己的方法");
}
}
changeSite(value) {
this.site = value;
}
}
let ff = new User("xiaomin");
console.log(ff);
ff.site = "bai.com";
console.log(ff.name + "的size是:" + ff.site); // 可更改
let ff2 = new User("xiaofeng");
console.log(ff2);
ff2.site = "修改后的size";
console.log(ff2.name + "的size是:" + ff2.site); // 不受其他对象改变属性的影响
定义类的静态属性和方法
类的静态方法和属性通过 static关键字声明。
定义类的静态属性和方法,只能本类及其子类能访问,不对实例化对象开放,如果想让对象访问,在类中定义方法即可。
类的静态属性和方法:适合批量操作实例化对象
class Vip {
// static 定义 静态属性 保存在类中
static host = "www.baidu.com";
constructor(name) {
this.name = name;
}
// 静态方法 static关键字
static getHost(url) {
// this指向Vip类 getHost
return this.host + `/${url}`;
}
static create(...args) {
return new this(...args);
}
show() {
console.log(this.name);
}
}
let v = new Vip("vip");
console.log(v);
console.log(Vip.getHost("index"));
console.dir(Vip.prototype.constructor == Vip); //true
// 通过create方法创建对象 核心还是new 类的操作
let obj = Vip.create("tt", 18);
console.dir(obj);
静态方法的使用
案例:课程类
批量操作对象,统计、筛选等操作。
const lesson = [{
name: "js",
price: 198
}, {
name: "css",
price: 82
}, {
name: "html",
price: 100
}, {
name: "jquery",
price: 150
}, {
name: "mysql",
price: 300
}];
// 定义一个课程类
class Lesson {
constructor(date) {
this.module = date;
}
// 设置获取name和price属性
get name() {
return this.module.name;
}
get price() {
return this.module.price;
}
// 对所有对象批量操作:使用静态方法
// 为每个对象创建实例化对象
static create(date) {
// 因为是数组类型,所以传入的数据是数组,遍历分别创建对象
return date.map(item => {
return new this(item);
})
}
// 选出价格最高的课程
static maxPrice(date) {
// 排序,降序取第一个
return date.sort((a, b) => {
return b.price - a.price;
})[0];
}
// 计算课程总额
static totalPrice(date) {
// 参数1:归并的结果
// 参数2:遍历时当前的元素
return date.reduce((total, cur) => {
return total += cur.price;
}, 0)
}
// 筛选价格高于一个价格的课程
static filterPrice(date, putPrice) {
return date.filter(item => {
return item.price > putPrice;
}).map(item => {
return `课程是:${item.name},价格是${item.price}`;
});
}
}
//通过静态方法实例化对象
let lessones = Lesson.create(lesson);
console.log(lessones[0].name);
//console.log(lessones);
//获取价格最高的课程
let maxPrice = Lesson.maxPrice(lesson).price;
console.log(`价格最高的课程是:${Lesson.maxPrice(lesson).name},价格是:${maxPrice}`);
//计算课程总价
let sumPrice = Lesson.totalPrice(lesson);
console.log(sumPrice);
//筛选符合价格条件的课程
console.log(Lesson.filterPrice(lesson, 100));
类的继承
上面说到了类本质就是构造函数,继承的实现同样是原型的继承,不过在类中继承不像之前那么麻烦了,只需要extends关键字就能实现类的继承。
A extends B :A类 继承 B类。
B类的构造方法中必须调用super(),同时super()还必须放在this之前,否则会报错。
class Father {
static father = "father.attr";
constructor() {
this.name = "name";
this.age = "age";
}
get msg() {
return `名字是:${this.name},年龄${this.age}岁`;
}
show() {
//方法自动挂在Father的原型上
}
}
class Son extends Father {
host = "private";
constructor() {
// 继承父类中的对象的所有属性
// 必须在子类构造方法的第一行,也就是this之前调用
super();
this.only = "son.attr";
}
}
let son = new Son;
console.log(son);
console.dir(Son);
console.log(Son.prototype.__proto__ == Father.prototype); // true
super原理
super是通过call、apply、bind方法实现,但是在多继承的时候又比它们好用,也正是super解决了原生多继承的问题。
两个对象的继承
先看下用原生的对象实现继承:
let user = {
name: "user.name",
// person要执行commen对象的show方法
show: function () {
console.log(this.name + " user对象");
}
};
let person = {
name: "person.name",
// person继承user对象
__proto__: user,
show: function () {
// person对象执行父级show方法
// this.__proto__.show(); // 这个是打印的是user的name
// 这才是本对象调用了父级方法 这样就实现了clas中super的作用
this.__proto__.show.call(this);
}
};
person.show();
定义了两个对象,user和person,让person继承user对象,这样我们需要设置person的__proto__指向user。person调用show方法时想使用父级的show方法,这时候我们需要让show方法的this指向person对象,则需要call或apply等方法。
show: function () {
//这个是user执行的,打印的是user的name,因为this.__proto__指向了user
// this.__proto__.show();
// 这才是本对象调用了父级方法 这样就实现了clas中super的作用
this.__proto__.show.call(this);
}
两个对象以上的继承
此时是没有发现问题,当我们再加一层,让user对象继承commen对象;
定义commen对象:
let commen = {
name: "commen.name",
show: function () {
console.log(this.name + " commen对象");
}
}
只需让user的__proto__ 属性指向 commen。
let user = {
name: "user.name",
// // user继承commen
__proto__: commen,
// person要执行commen对象的show方法
show: function () {
console.log(this.name + " user对象");
//此时this指向person,
//则this.__proto__指向user
//所以就变成了 user.show.call(person)
// 会不断的调用自己,陷入死循环的状态
this.__proto__.show.call(this);
// 这就体现了super的作用了
}
};
person.show();
这就需要用到类的super了,既方便又好用,不会出现多继承出现的这种问题。
私有属性的设置
在类中,我们人为的规定私有属性使用 _开头定义对象私有属性。
class User {
// 这种命名方法,就是认为的告诉用户这个属性是不对外开放的,不可访问的
// 但本质上还是能访问和修改的,这种方式知识命名方式的保护属性
_size = "http://baidu.com";
// 如果想开放,设置接口
set url(url) {
if (!/^http?:/i.test(url)) {
throw new Error("地址异常");
}
this._size = url;
}
get url() {
return this._size;
}
}
let user = new User;
console.log(user);
user._size = "http://js.com"; // 能设置 并没有真正意义上实现保护
console.log(user._size); // 能获取
user.url = "http://baidu.com";
console.log(user.url);
毕竟是人为规定的,实际还是能操作的。
我们可以使用Symbol数据类型来设置真正的私有属性。
// []存储Symbol的值
const date = Symbol();
class User {
// 设置属性 当前类及其子类可使用,换句话说就是有其他类继承本类也可使用这个私有属性
// [HOST] = "http://www.baidu.com";
// 当私有变量多的时候,使用对象把这些变量都存储起来
constructor(name) {
this[date] = {};
this[date].host = "http://www.baidu.com";
// this.name = name;
// 设置name为私有属性
this[date].name = name;
}
// 若想操作私有属性时,开放接口来操作
// 通过host属性来访问
set host(url) {
//正则验证地址是否合法
if (!(/^http(s?):/i).test(url)) {
throw new Error("地址异常");
}
this[date].host = url;
}
get host() {
return this[date].host;
}
// 设置接口开放name属性
get name() {
return this[date].name;
}
}
let u1 = new User("u1");
let u1 = new User("u1");
console.log(u1[Symbol()]); // 获取不到 实现属性的保护作用
console.log(u1.host); // this[date].host
console.log(u1.name); // undefined 不可访问
总结类的几点优势
- 类中声明的方法,会自动放到原型对象中,;简化了原型的操作
- 类的原型对象中的属性不可变量,属性特征默认为false;
- 类默认在严格模式下运行,使得编写得代码更加健壮
类的综合案例:滑动栏
有点类似tab栏切换,就是一列选项,点击当前选项显示其内容,其余的隐藏,进行切换效果。
效果图:
整个区域:事件的处理;
存在面板:面板做的动画;
存在动画:显示、隐藏的效果;
// 动画类
class Animation {
// 传递一个参数:做动画的部分
constructor(ele) {
this.ele = ele;
this.defaultHeight = this.height;
// 默认为显示
this.isShow = true;
// 滑动的速度
this.speed = 1;
// 定时器的间隔时间
this.cutTime = 5;
}
// 隐藏方法
hide(callback) {
this.isShow = false;
let timer = setInterval(() => {
if (this.height <= 0) {
clearInterval(timer);
callback && callback();
return;
}
this.height = this.height - this.speed;
}, this.cutTime);
}
// 显示方法
show(callback) {
let timer = setInterval(() => {
if (this.height >= this.defaultHeight) {
clearInterval(timer); // 到达效果只会移除定时器
callback && callback();
return;
}
this.height = this.height + this.speed;
}, this.cutTime);
}
get height() {
// 去除px单位 去掉后两位 变为数值类型
return parseInt(window.getComputedStyle(this.ele).height.slice(0, -2));
}
set height(height) {
this.ele.style.height = height + "px";
}
}
//测试动画效果
// let box = document.querySelector(".box");
// let an = new Animation(box);
// console.log(an);
// an.hide(() => {
// console.log("隐藏完了");
// // an.show(() => {
// // console.log("显示完了");
// // })
// });
// 区域类
class Slider {
constructor(ele) {
this.ele = document.querySelector(ele);
this.links = this.ele.querySelectorAll("dt");
// 使用类创建对象
this.panles = [...this.ele.querySelectorAll("dd")].map(item => {
// 继承了动画类 , 需要一个元素
return new Panle(item);
});
this.bind(); // 添加事件
}
bind() {
this.links.forEach((element, index) => {
element.addEventListener("click", item => {
this.handler(index);
})
});
}
// 事件中的处理方法
handler(index) {
// 隐藏当前之外的元素
// console.log(Panle.filter(this.panles, index));
// 解决多动画抖动
Panle.hideAll(Panle.filter(this.panles, index), () => {
// 显示自己
this.panles[index].show();
});
}
}
// 这个面板区域, 做动画操作
class Panle extends Animation {
// 检测动画
static flag = 0;
// 批量操作对象
static hideAll(panle, callback) {
// 解决多动画
if (Panle.flag > 0) return;
panle.forEach(item => {
Panle.flag++;
item.hide(() => {
Panle.flag--;
});
})
callback && callback();
}
static filter(panle, index) {
// 过滤掉点击的对象
return panle.filter((item, i) => i != index);
}
}
let s = new Slider(".slider");
console.log(s);
适合敲三遍以上,主要是整理逻辑。类这个东西我都看了快两天了。
加油加油!