js进阶学习之--面向对象(一)
构建对象的方式一共有三种:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象</title>
<script>
//1.工厂方式构建对象
//弊端:通过工厂构建对象无法检测该示例来自于哪个对象类型
function Person(name,sex,age){
var obj = new Object();
obj.name = name;
obj.sex = sex;
obj.age = age;
obj.eat = function(){
console.log("吃饭");
}
return obj;
}
var person = createObj("李四","女",28);
console.log(person);
//2.字面量形式创建对象(属性、方法)
var person = {
name:"张三",
sex:"男",
age:30,
eat:function(){
console.log("吃饭");
},
say:function(){
console.log("说话");
}
};
console.log(person);
//3.通过构造函数构建对象
//1)、构造函数名首字母大写(规范)
//2)、构造函数和函数调用方式不同
//普通函数调用:函数名()
//构造函数调用:使用new 函数名(); 一旦使用new关键调用函数,内部this指向发生变化,并且该函数变成了对象,this指向是该对象本身。
function Person(){
this.name = "张三";
this.sex = "男";
this.age = 30;
this.eat = function(){
console.log("吃饭");
}
}
//Person.abc = "123"; // 静态属性赋值:调用方式构造函数名.属性名 = 数据
var person = new Person();
//动态属性:调用方式通过实例名.属性名
console.log(person);
//console.log(Person.abc); // 静态属性取值:调用方式构造函数名.属性名
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象2</title>
<script>
//如果将方法放在构造函数中就会造成多余内存的消耗(内存冗余)
//原因:在创建该对象多个实例时,每个方法都会形成该示例的副本并在内存中重复开辟空间
function Person(name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
this.hobby = ["看书","听歌"];
}
//向原型对象中添加方法有2种方式:
//1.利用原型对象动态创建属性添加方法
Person.prototype.eat = function(){
console.log("吃饭");
}
Person.prototype.say = function(){
console.log("说话");
}
console.log(Person.prototype);
//2.利用重写原型对象添加方法
Person.prototype = {
constructor:Person,
eat:function(){
console.log("吃饭");
},
say:function(){
console.log("说话");
}
};
console.log(Person.prototype);
//对象实例会共享该实例构造函数中的原型对象
var person1 = new Person("张三","男",30);
console.log(person1);
var person2 = new Person("李四","女",28);
//在构建对象时,将方法存储到该对象的原型对象即可解决方法造成的内存冗余问题
</script>
</head>
<body>
</body>
</html>