目录
1、属性与方法(增删改查)
注意:
- 属性的创建有两种方式,但是想要支持 “-” 语法 必须使用 [“”]
例如:abc-123 必须使用 [“abc-123”] 进行创造和访问。- 出现的访问有两种方式,除非存在 -,可以互相任意使用
例如:obj.a = 123 ===>>> obj.a 、obj["a"]//创建对象的两种方式 var obj = {}; var obj = new Object(); //对象的属性,两种方式 obj.prop = ""; obj["age-0"] = 15 // 对象的方法 obj.func = function () {……} // 对象属性和方法的访问方式 obj.prop obj.func() obj["age-0"] // 对象属性和方法的修改 obj.prop = "new" // 属性与方法删除 delete obj.prop delete obj.func
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>面向对象初始</title> </head> <body> </body> <script type="text/javascript"> // 创建一个空对象 var obj = {} // 对空对象进行添加属性 obj.name = "大毛";21 obj["age"] = 18; // 打印对象 console.log(obj); // 使用属性 console.log(obj["name"]); console.log(obj.age); console.log(obj["age"]); // 对对象添加方法 obj.eat = function () { console.log("吃吃吃!!!"); } // 方法的使用 obj.eat(); // 属性|方法的移除 delete obj.name console.log(obj); </script> </html>
2、类字典:不存在字典的概念,却模拟字典的实现
总结:
- key全为字符串形式,存在两种书写方式, name || “name”
- 当key为js标识符不支持的语法情况下,必须添加引号。例如:字符串中存在 -,“abc-123”
- value可以为任意类型
- 值存在两种访问方式:字典名.key || 字典名["key"] ; 注意“.”的使用
- 可以随意添加 key:value的键值对 完成增删改查
//dict.name | dict["my-name"] | dict.fn() var dict = { key1: "value1", key2: 18, "my-key3": [1, 2, 3, 4, 5] } var dict_1 = { "my-name": "zero", fn: function () {}, fun () {} } // 增 dict.key4 = true; console.log(dict); // 删 delete dict.key4; console.log(dict); // 改 dict["my-key3"] = [5, 4, 3, 2, 1]; console.log(dict); // 查 console.log(dict.key1); console.log(dict["key1"]);
3、构造函数(ES5):实现多个相似类的创造
注意:
- 构造函数,命名通常采用首字母大写的大驼峰写法
- 内部构建属性和方法的时候,使用this关键词
- 构造函数可以创建多个实例对象,但通过{}普通构造出来的对象是唯一的。例如: var obj = {}
//创建构造函数 function People(name, age) { this.name = name; this.age = age; this.eat = function () { return 'eat'; } } //创建实例 var p1 = new People("zero"); var p2 = new People("seven"); //调用实例内属性和方法 console.log(p1.name) console.log(p2.age) p1.eat() //查看实例对象 console.log(p1); console.log(p1);
4、继承(ES5)(存在知识点模糊???)
- 组合继承(构造继承属性,原型继承方法)
注意:
- 必须存在两个构造函数才可以完成继承。
- 继承是属性和方法的复用
- 创建子类实例时,可以向父类构造函数传参
- call方法用来完成属性的继承
(继承过程中,子类调用call方法,传入父类的this和子类传入的参数)- prototype原型用于继承方法
// 父级 function Sup(name) { this.name = name; this.fn = function () { console.log('fn class'); } } // 子级 function Sub(name) { // 继承属性 Sup.call(this, name); } // 继承方法 Sub.prototype = new Sup; // 创建子级对象 var sub = new Sub("subClass"); // 使用属性 console.log(sub.name); // 使用方法 sub.fn(); // 指向自身构造函数 Sub.prototype.constructor = Sub;
5、类及继承(ES6)
注意:
- 构造器 constructor
- 子类通过 子类名 extends 父类名{} 进行继承操作
class Person { // 构造器:创建对象完成初始化操作 constructor (name, age) { this.name = name; this.age = age; } // 实例方法:只能由对象调用 eat () { console.log(this.name + '吃吃吃'); } // 类方法:只能由类调用 static create () { console.log('诞生'); } } let p1 = new Person('zero', 8); let p2 = new Person('seven', 58); console.log(p1.age); p2.eat(); // Person.eat(); Person.create(); // p2.create(); // 继承 class Student extends Person { constructor (name, age, sex) { // super指向父级 super(name, age); this.sex = sex; } } let s1 = new Student("张三", 18, "男"); // 属性的继承 console.log(s1.name, s1.age, s1.sex); console.log(); // 方法的继承 s1.eat(); // 继承为全继承 Student.create();