面向对象
封装、继承、多态(抽象性)
js是一门基于对象的语言
万物皆对象
对象:有属性和方法,具体特指的某个事物
对象:有特征和行为,具体特指的某一事物
javaScript 中的所有事物都是对象:字符串、数值、数组、函数...
此外,JavaScript 允许自定义对象。
如何获取该变量(对象)是不是属性什么类型的?
语法:
变量 instanceof 类型的名字——————>布尔类型,true就是这种类型,false不是这种类型
在当前的对象方法中,可以使用this关键字代表当前的对象
//人的对象
var person = new Object();
person.name = "小萌";
person.age = 10;
person.sayHi=function(){
//在当前这个对象的方法中是可以访问当前这个对象的属性的值
//在当前对象方法用可以使用this关键字代表当前对象
console.log("我叫"+this.name+",今年"+person.age+"了");
}
person.sayHi();
如何一次性创建多个对象?
把创建对象的代码封装到一个函数中
简单工厂创建对象
function createObject(name,age){
var person = new Object();//创建对象
person.name = name;//为对象添加属性
person.age = age;
person.sayHi=function(){//为对象添加方法
console.log("我的名字叫"+this.name+",今年已经"+this.age+"岁了");
}
return person;//记得返回 不然var per1就是undefined
}
var per1 = createObject("翠花",18);
per1.sayHi();
var per2 = createObject("萌萌哒",26);
per2.sayHi();
自定义构造函数创建对象
- 先自定义构造函数
根据查看js系统构造函数Object定义方式
function Object(value){
}
我们根据Object的定义方式进行自定义构造函数
//自定义构造函数
function Person(){
this.name = "小白";
this.age = 18;
this.sayHi = function(){
console.log("我是"+this.name+"今年"+this.age);
}
}
- 创建对象
js创建对象 var obj = new Object();
所以我们也根据js创建对象的方式进行自定义创建对象
//创建对象
var per = new Person();
console.log(per.name);
console.log(per.age);
per.sayHi();
- 整个自定义构造函数创建对象代码
//自定义构造函数
function Person(){
this.name = "小白";
this.age = 18;
this.sayHi = function(){
console.log("我是"+this.name+"今年"+this.age);
}
}
//创建对象
var per = new Person();
console.log(per.name);
console.log(per.age);
per.sayHi();
优化代码----------定义参数
/*
1在内存中开辟空间,存储创建新的对象
2把this设置当前的对象
3设置对象的属性和方法的值
3把this这个对象返回
自定义构造函数
*/
function Person(name,age){
this.name = name;
this.age = age;
this.sayHi = function(){
console.log("我是"+this.name+"今年"+this.age);
}
}
//创建对象
var per = new Person("小卢",18);
console.log(per.name);
console.log(per.age);
per.sayHi();
通过自定构造函数实现下面的例子
创建一个图片的对象,图片有宽,有高,有大小(4M),图片可以展示内容
创建一个小猫的对象,猫有颜色,体重,年龄,小猫可以抓耗子,可以打架
//创建自定义构造函数
function Picture(width,height,size){
this.width = width;
this.height = height;
this.size = size;
this.show = function (){
console.log("展示当前图片的宽度:"+this.width+"高度:"+this.height+"大小:"+this.size);
}
}
//创建对象
var picture = new Picture("100px","200px","20m");
picture.show();
//创建自定义构造函数
function Smallcat(color,weight,age){
this.color = color;
this.weight = weight;
this.age = age;
this.seize =function(){
console.log(this.age+"岁的"+this.color+"的小猫咪体,体重"+this.weight+"可以去抓耗子,可以去打架了");
}
}
//创建对象
var smallcat = new Smallcat("绿色","3kg",3);
smallcat.seize();