一:对象基础
1.什么是对象?
代表现实中的某个事物, 是该事物在编程中的抽象
多个数据的集合体(封装体)
用于保存多个数据的容器
2.为什么要用对象?
便于对多个数据进行统一管理
3.对象的组成
①属性
代表现实事物的状态数据 由属性名和属性值组成 属性名都是字符串类型, 属性值是任意类型
②方法
代表现实事物的行为数据
是特别的属性==>属性值是函数
4.如何访问对象内部数据?
属性名: 编码简单, 但有时不能用
[‘属性名’]: 编码麻烦, 但通用
5.难点:
对象最终保存的属性名一定是字符串,如果设置的时候不是字符串,会调用toString()方法将其转换成字符串
// 创建对象
var p = {
name: 'Tom',
age: 12,//普通属性
setName: function (name) {
this.name = name//方法,特别的属性,属性值是function
},
setAge: function (age) {
this.age = age
}
}
// 访问对象内部数据
console.log(p.name, p['age'])
p.setName('Jack')
p['age'](23)
console.log(p['name'], p.age)
问题: 什么时候必须使用[‘属性名’]的方式?
属性名不是合法的标识名
属性名不确定
var obj = {};
obj.name = 'kobe';
obj['content-type'] = 'application';//obj.content-type = 'application',这样写直接报错,因为content-type是不合法写法,编译工具不认识
console.log(obj['content-type']);
6.对象中所有的key都是字符串
理解什么是key?
第一:key其实就是对象中键名,是可以自定义的,比如:name,age,也可以是数字:1,2,3
第二:如果key是数字,不能使用obj.1这样取值,而是要用obj[ 1 ]这样取值
第三:key也可以是变量名,通过 [ 变量 ] 包起来,取值的时候是obj.[ 变量 ]
// 对象中所有的key都是字符串
var a = {}
var obj1 = {n:345345345} // toString() = '[object Object]'
var obj2 = {hh: 4535345} // toString() = '[object Object]'
a[obj1] = 4
console.log(a); // {}
a[obj2] = 5
console.log(a);
console.log(a[obj2]) // 输出5
二:对象高级
01.Object构造函数模式
套路: 先创建空Object对象, 再动态添加属性/方法
适用场景: 起始时不确定对象内部数据
缺点: 语句太多
var obj = new Object();
obj.name = 'kobe';
obj.age = 43;
02.对象字面量
套路: 使用{}创建对象, 同时指定属性/方法
适用场景: 起始时对象内部数据是确定的
缺点: 如果创建多个对象, 有重复代码
var obj = {
name: 'kobe',
age:43
};
var obj2 = {
name: 'wade',
age: 42
};
var obj3 = {
name: 'tom',
age: 18
};
03.工厂模式
套路: 通过工厂函数动态创建对象并返回
适用场景: 需要创建多个对象
缺点: 对象没有一个具体的类型, 都是Object类型
function Person(name, age) {
return {
name: name,
age: age
};
};
var person1 = Person('kobe', 43);
var person2 = Person('wade', 38);
console.log(person1 instanceof Person);//false,persion1不是Persion实例对象
04.自定义构造函数模式
套路: 自定义构造函数, 通过new创建对象
适用场景: 需要创建多个类型确定的对象
缺点: 每个对象都有相同的数据, 浪费内存
function Person(name, age) {
this.name = name;
this.age = age;
this.showName = function () {
console.log(this.name);
};
};
var person1 = new Person('kobe', 43);
var person2 = new Person('wade', 38);
console.log(person1 instanceof Person); // true,persion1是Persion的实例对象
person1.showName();
person2.showName();
05.构造函数+原型的组合模式
套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
适用场景: 需要创建多个类型确定的对象
function Person(name, age) {
this.name = name;
this.age = age;
};
Person.prototype.showName = function () {
console.log(this.name);
};
var person1 = new Person('kobe', 43);
var person2 = new Person('wade', 38);
console.log(person1 instanceof Person); // true,persion1是Persion的实例对象
person1.showName();
person2.showName();
三.原型继承
01.原型继承的理解
子类的原型成为父类的实例
function Persion(name, age) {
this.name = name;
this.age = age;
};
Persion.prototype.showName = function(){
console.log(this.name);
};
var persion1 = new Persion("kobe",18);
persion1.showName();//kobe
//子类的原型成为父类的实例
Child.prototype = new Persion();
//构造器属性丢了,人为添加回来
Child.prototype.constructor = Child;
//定义一个child类
function Child (name , age){
this.name = name;
this.age = age;
};
var child1 = new Child("xiaoming",18);
child1.showName();//xiaoming
person1的原型链: person1 —> Person.prototype(showName) —> Object.prototype,可以找到showName
child1的原型链: child1 —> Child.prototype —> Object.prototype,找不到showName,并报错
如果让Child的原型成为Persion的实例,让其扮演这个角色,即添加这句Child.prototype = new Persion();这样一来child1的原型链变为:child1 —> Child.prototype —> Person.prototype(showName) —> Object.prototype,可以找到showName,但是又会出现另外一个问题,constructor这个构造器属性丢了,所以还得添加回来
02.借用构造函数继承
function Persion(name, age) {
this.name = name;
this.age = age;
};
var persion1 = new Persion("kobe",18);
persion1.showName();//kobe
//定义一个child类
function Child (name , age , sex){
//this.name = name;
//this.age = age;
//借用Persion中代码,提升性能
//Persion(name,age),this --> window
//思考:this应该是Child的实例对象,而不是window,应该怎么修改?
//Child的实例对象 = this
Persion.call(this,name,age);
this.sex = sex;
};
var child1 = new Child("xiaoming",18,"男");
child1.showName();//xiaoming
03.组合继承(借用构造函数继承+原型继承)
function Persion(name, age) {
this.name = name;
this.age = age;
};
Persion.prototype.showName = function(){
console.log(this.name);
};
var persion1 = new Persion("kobe",18);
persion1.showName();//kobe
//子类的原型成为父类的实例
Child.prototype = new Persion();
//构造器属性丢了,人为添加回来
Child.prototype.constructor = Child;
//定义一个child类
function Child (name , age , sex){
Persion.call(this,name,age);
this.sex = sex;
};
var child1 = new Child("xiaoming",18,"男");
child1.showName();//xiaoming