JS面向对象入门
1、面向对象语言概念
面向对象语言主要包括 类、对象、封装、多肽。
2、面向对象的编程思想
面向过程思想:关注解决问题的步骤 按步骤执行
优点:开发成本低。
缺点:不适合大型项目。
面向对象思想:关注解决问题所需要的对象,然后根据业务逻辑按一定的规则调用这些对象的相关功能
(想看对象有哪些功能进行封装——在按逻辑思路走)
优点有效的弥补面向过程思想的不足。
3、js里的面向对象
1> 对象分为系统对象和自定义对象两种。我们可以通过调用系统构造函数来创建出系统对象,
如:array\date等。自定义对象必须自己创造,无法利用系统函数来创造。
// new + 构造函数
var arr1 = new Array();
// 字面量
var arr2 = [1, 2, 3];
var obj1 = new Object();
2>创建JS对象_直接创建
// 1、创建一个空对象
var per1 = new Object();
// 2、把该对象所需要的属性、方法添加进去
per1.name = "曹勇";
console.log(per1.name);
per1.gender = "男";
// 给新对象添加方法(函数 )
per1.manager = function () {
alert("保持安静");
};
per1.name = "西门大官人";
per1.age = 12;
console.log(per1.age);
删除对象中的属性:delete+对象属性名
delete per1.age;
console.log(per1.age);
对象名.方法名():调用对象下的方法。
per1.manager(); :
如何区分:函数\方法?当函数属于一个对象时,该函数就是这个对象下的一个方法,通过方法名来调用该函数
如何区分:变量\属性?当变量属于某一个对象时,该变量就是这个对象下的一个方法,通过属性名来调用该变量
// 把per1对象交给per2,这样per2就和per1一致
var per2 = per1;
console.log(per2.name);
console.log(per2.age);
per2.name = "张倩";
console.log("修改后的p2name属性"+per2.name);
// 因为per2和per1所指向的是同一块内存,所以per2修改了这块内存的值,per1再来访问时,就会获取到新的值
console.log("per1的name属性值" + per1.name);
// 创建第二个per对象
var per3= new Object();
per3.name = "老宋";
per3.age = 24;
per3.gender = "男";
per3.hobby = "女";
// 我们可以通过.(点语法)来访问对象属性
per3.name;
// 我们也可以通过[]来访问对象的属性:方括号中必须是属性字符串或保存属性字符串的变量
// 一般在遍历对象的属性时才会使用[]这种方法
console.log(per3["name"]);
// 遍历对象属性:for...in...
for (var property(财产) in per3) {
console.log( property + "=" + per3[property]);
}
var arr = [1, 3, 2, 5];
for (var index in arr) {
arr[index];
}
3>创建JS对象_字面量创建
// 使用字面量创建对象
var per1 = {
name: "张三",//name(属性) 属性与属性值之间用分隔符 隔开: 属性与属性之间 逗号隔开,
age: 12,
hobby: "打球",
sayHi: function () {
alert("你好");
}
}
console.log(per1.name);
per1.sayHi();
4>创建JS对象_构造函数创建(工厂模式)
使用构造函数创建对象
优势:
创造多个对象时代码量比较少
劣势:
1、内存空间浪费严重;
2、无法通过代码获取到创建出来的对象和构造函数之间的关系。
// 1、定义构造函数(首字母必须大写)
function CreatPerson (name, age) {
// 1.1、 创建一个新的空对象
var person = new Object();
// 1.2、给空对象添加属性和方法
person.name = name;
person.age = age;
person.sayHi = function () {
return name + age;
};
// 1.3、把创建好的对象返回出去
return person;
}
// 2、调用构造函数创建对象
var per1 = CreatPerson("张三", 23);
console.log(per1.name);
per1.sayHi();
var per2 = CreatPerson("李四", 56);
// 通过instanceof可以判断出该对象是否是通过某个函数创建出来的。
// 返回值为false,说明系统无法判断通过这种方法创造出来的对象和构造函数之间的关系
console.log(per2 instanceof CreatPerson);
console.log(per2.name);
// 使用new+构造函数方法创建出来的对象可以确定对象是否是通过某个函数创建出来的
var arr = new Array();
// 返回true
console.log(arr instanceof Array);