面向对象的javascript
一、创建对象
创建对象的几种方式：
var obj = {};
var obj = new Object();
var obj = Object.create(fatherObj);
var Obj = function(a,b){this.a=a;this.b=b;};
Obj_object = new Obj(a,b);
二、通过继承创建对象
var obj = Object.create(fatherObj);
三、使用构造器创建对象
var Obj = function(a,b){this.a=a;this.b=b;};
Obj_object = new Obj(a,b);
四、call、apply调用实现的装饰器模式
可以指定this指向的调用方式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>面向对象的 JavaScript</title>
</head>
<body>
<script type="text/javascript">
/*创建对象方式非常便利，
* javascript对于声明在内部或者外部的方法没有区别对待*/
//1.定义对象 var obj = new Object();与下面定义类型方式等同
var obj_1 = {
id : "No ID",
details:null,
fnInner:function(str){//方法调用模式，this指向方法所在对象
this.details = (this.id = str +" "+"Function Inner");
}
}
obj_1.fnOuter = function(str){//函数调用模式，this指向调用函数的对象
this.details = (this.id = str +" "+"Function Outer");
}
obj_1.fnInner("obj_1 ID");
console.log(obj_1.details);
obj_1.fnOuter("obj_1 ID");
console.log(obj_1.details); //2.使用Object.create()创建对象实现继承
var obj_2 = Object.create(obj_1);
//编写obj_2自己的属性
obj_2.id = "NO ID";
obj_2.details = null;
obj_2.func = function(str){
this.details = (this.id = str +" "+"Function");
}
obj_2.func("obj_2 ID");
console.log(obj_2.details);
obj_2.fnInner("obj_2 ID");
console.log(obj_2.details+" inhert obj_1");
obj_2.fnOuter("obj_2 ID");
console.log(obj_2.details+" inhert obj_1"); /*主流语言创建类以及调用类的方式，
* 在javascript中的实现十分笨拙，牵扯到prototype关键字的使用
* 更是容易造成混乱*/
//3.使用构造函数来创建“类”
var Obj_3 = function (id, details) {
//初始化属性
this.id = id;
this.details = details;
}
//显示使用prototype使函数成为该对象的方法
Obj_3.prototype.funcPrototype = function(str){
this.details = (this.id = str +" "+"prototype Function");
}
//我理解为静态方法不能获取this关键字的引用,本身与类没有任何关系
//prototype关键字的使用导致对象创建混乱，javascript的编程思路不清晰导致
//所以采取用大写字母声明的方式来避免
Obj_3.funcStatic = function(str){
return str +" "+"static Function";
}
var Obj_3_object = new Obj_3("Obj_3 ID Code", "Obj_3 Details");
Obj_3_object.funcPrototype("Obj_3");
console.log(Obj_3_object.details);
console.log(Obj_3.funcStatic("Obj_3")); /*对象的call、apply调用*/
var obj_4 = {
details:"NOT Null",
func:function(str){
return (this.details += str);
}
}
//在函数层级实现装饰器模式
//关键字this的指向-->call或apply的第一个参数
obj_4.func.call(obj_1,"obj_1 调用 obj_4 function func");
console.log(obj_1.details);
</script>
</body>
</html>