JavaScript 面向对象思维
面向对象编程
-
面向过程 : 将事件分析过程 , 按照步骤完成
-
面向对象 : 将事件解析为若干个对象 , 然后按照对象的功能来解决问题 , 对象是功能的核心
- 封装性
- 继承性
- 多态性
-
对比 :
- 面向过程 : 优点 , 性能比 , 适用于与硬件紧密结合 , 缺点 , 难以维护 , 易扩展 , 易复用
- 面向对象 : 易维护 \ 易复用 \ 易拓展 , 由于面向对象具有封装性 \ 继承性 \ 多态性 的特性 , 可以设计出低耦合的系统 , 使系统更加灵活 \ 更加易维护 ; 性能比面向过程低 ( 在复杂度较低的系统中 )
ES6 中的对象与类
类与对象概述
- 对象 : 是由方法和属性组成 , 是一个无序的键值对的集合 , 指的是一个具体的事物
- 属性 : 事物的特征 , 在对象中用属性来表示 (常用名词)
- 方法 : 事物的行为 , 在对象中用方法来表示 (常用动词)
- 创建方式 : 字面量创建对象 , 构造函数创建对象 , new Object 对象
const obj = new Object();
obj.name = 'Tim';
obj.age = 12
console.log(obj);
- Class 类 ( ES6中新增类的概念 )
- 类抽象了对象的公共部分 , 是一种泛指
- 创建类 , 注意创建时 , 不要加括号 , 类的内部添加方法 (函数) 不要加 function
// 关键字 class 创建类
class Person {
// 将 公有的属性放置 constructor , (构造函数 , 或者说是构造器)
constructor(cname, cage) {
this.name = cname;
this.age = cage;
}
sing(song) {
console.log(this.name + '唱' + song);
}
show(skill) {
console.log(this.name + '会' + skill);
}
}
// 关键字 new 实例化对象
var xiaoming = new Person('小明', 15);
console.log(xiaoming);
xiaoming.sing('贝加尔湖畔');
xiaoming.skill('敲代码');
创建类的总结
- 通过关键字 class 创建的类 , 类名首字母通常大写
- constructor 函数 , 可以接受传递过来的参数 , 同时返回实例对象
- constructor 函数 , 只要我们实例化 , 就会自动调用 这个函数 , 及时不写 , 也会自动生成
- 多个函数方法之间不需要 逗号分隔
- 实例化 过程中的 new 关键字 不可省略
- 几个特殊的点 : 创建时 类名之后不要加小括号 , 实例化过程中 类名之后要加小括号 , 构造函数 与 类内部的方法定义时 不需要加 function 关键字
类的继承
- 示例 :
class Father {
constructor(uname, age, address) {
this.name = uname;
this.age = age;
this.live = address;
}
sayHi() {
console.log('你好我是' + this.name + '今年' + this.age + '岁');
}
}
class Son extends Father { //
constructor(uname, age, address, uchange) {
// super 关键字可以用于继承父类的属性与方法
super(uname, age, address);
this.change = uchange;
super.sayHi
}
}
let father = new Father('李四', 35, '长沙芙蓉区');
let son = new Son('李小四', 12, '长沙芙蓉区', '每天5元');
console.log(father);
father.sayHi();
console.log(son);
son.sayHi();
- super 关键字 , 必须在子类 this 之前调用 , 语法层面上的规定
- 继承中存在就近原则 , 即如果子类中存在某个方法 , 那就无需继续到父类中查找
- 时刻注意 this 的指向
- constructor 中的 this指向的是 new实例化出来的实例对象
- 自定义的方法 , 一般也指向的是 new实例化出来的实例对象
- 绑定事件之后的 this指向的就是触发事件的事件源
- ES6中 class类 没有变量提升 , 所以必须先定义类 , 才能实例化对象
