JavaScript是一门面向对象语言
面向对象:是一种编程思想
什么是对象?
-
对象是属性和方法的集合体;
属性:储存数据
方法:执行的动作语法:obj = { name:12, age:13, skill:function(){} } //name,age:表示对象obj的属性名,冒号后面的为属性值,像这种形式叫键值对 //skill:是obj对象的方法
自定义对象方式
1.字面量
2.工厂模式
3.构造函数模式
4.原型模式
5.混合模式(原型模式和构造函数模式的混合)
字面量
- 优点:简单,容易理解
- 缺点:不能批量生产
var obj={
name:'什么颜色',
age:78,
skill:function(){
console.log('睡觉');
}
}
console.log(obj['name']);//什么颜色
obj.skill();//睡觉
工厂函数模式
- 优点:实现了对象的批量生产
- 缺点:不能检测出对象是由谁来生产的
function factory(name,age,callback){
return {
name:name,
age:age,
callback:callback,//回调函数
skill:function(){ //方法
console.log('睡觉');
}
}
}
var girlFriend = factory('翠花',18);
console.log(girlFriend);//{name: "翠花", age: 18, skill: ƒ, callback: undefined}
var girlFriend2 = factory('如花',81);
console.log(girlFriend2); //{name: "如花", age: 81, skill: ƒ, callback: undefined}
console.log(girlFriend==girlFriend2);//false
var girlFriend = factory('凤姐',20,function(){
console.log("解锁更多姿势!");
});
//调用方法
girlFriend3.callback();
构造函数模式
所有属性和方法需要this来定义,通过new关键词来调用
new关键词做了什么事?
1.创建一个新对象
2.将this指向新对象
3.执行构造函数的代码
4.返回这个新对象
- 优点:解决不能识别由谁创建的问题
- 缺点:实现相同的方法,却会各自创建新的空间来存放这些方法,这样会造成空间浪费
function Human(type,name,gender,age){
this.type = type;
this.name = name;
this.gender = gender;
this.age = age;
this.skill = function(){
console.log('走');
}
}
var shiyan = new Human('黄种人','食盐','男',20);
console.log(shiyan);//Human {type: "黄种人", name: "食盐", gender: "男", age: 20, skill: ƒ}
var xiawa = new Human('白种人','夏娃','女',1000);
console.log(xiawa);//Human {type: "白种人", name: "夏娃", gender: "女", age: 1000, skill: ƒ}
console.log(xiawa.__proto__.constructor);//指向构造函数
console.log(xiawa.skill==shiyan.skill);//false
原型模式
- 优点:实现继承,解决了构造函数空间浪费的问题
- 缺点:不能定制
function Animal(){};
Animal.prototype.type='cat';
Animal.prototype.skill=function(){
console.log('eat')
}
var mao = new Animal();
mao.skill();//eat
var mao2 = new Animal();
mao2.skill();//eat
console.log(mao.skill==mao2.skill);//true
console.log(mao2==mao);//false
混合模式(原型模式和构造函数模式的结合)
结合了他们两个的优点
function Student(cls,name,age,gender,num){
this.cls=cls;
this.name=name;
this.age=age;
this.gender= gender;
this.num = num;
}
//共有的方法,不需要每次创建,节省空间
Student.prototype.skill=function(){
console.log('学习');
}
var student1 = new Student('01','小芳',12,'女','0101');
console.log(student1);
var student2 = new Student('01','小芳',12,'女','0101');
console.log(student1.skill==student2.skill);//true
console.log(student1==student2);//false
//student.gender返回的是简单数据类型
console.log(student1.gender==student2.gender);//true