第三阶段-原型学习笔记

来源:互联网 发布:mac系统免费办公软件 编辑:程序博客网 时间:2024/06/05 18:52

①机器语言(二进制)

②基于机器的语言(汇编)//通过口令调用

③对象/类 //模拟人类认知

>类

认知模型中的模板、对认知的归纳总结  //抽象的

>对象

类名中的具体概念、具体的事例

------面对对象语言三大特征------

分装/继承/多态//JavaScript里最开始只有分装/继承



得到对象的四种方法:

①通过new object得到

var person = new Object;

②使用json得到:

var person ={
name : "小红",
age : 18,
say : function(){
alert("我的名字:"+name+"我的年龄"+age);
}
}
person.say();

③使用工厂模式得到://工厂模式:21种设计模式中的其中一个,用于架构

function createPerson(name,age){
var p = name Object();
p.name = name;
p.age = age;
p.say = function(){
alert(this.name+this.age);
}
return p;
}
var p1=createPerson("小红",18);
var p2=createPerson("小名",18);


④使用构造函数创建一个对象://构造函数--实例化对象

function Person(name,age){//首字母大写  代表一个类(类名)
this.name = name;
this.age = age;
this.say = function(){
alert("我的名字是:"+this.name+",我的年龄:"+this.age);
}
}
var p1=new Person("小红",16);
var p2=new Person("小花",16);
p1.say();
p2.say();

------缺点-----

①②中的方法因为没有类的约束,所以无法实现对象的重复使用

③中的工厂模式虽然很好的解决的对象不能重复使用的问题但是无法判断对象的类型了

④中使用构造函数创建对象的方式最大的好处就是除了对象的重复使用外,就是还能判断类型,但是通过代码分析得知:

say 方法在每个对象创建后都存在了一个方法拷贝(但是我们发现代码在只有调用时,say 方法才会在堆中创建),这样就增加了内存的消耗了,如果在对象中有大量的方法时,内存的消耗就会高,这样不行了

要解决上述问题,就是把方法放到全局函数内,Window对象也能访问。但是这样会破坏对象的封装性。不利于开发与维护。


封装--JavaScript的原型( prototype)

解决以上方案所暴露的问题:

//prototype默认指向一个新的内存空间,是原型对象的原型。

function Cat(){};
Cat.prototype.name="球球";
Cat.prototype.color="白色";
Cat.prototype.age=0.5;
Cat.prototype.sex="母";
Cat.prototype.play=function(){
alert("我的名字是:"+this.name+",我的年龄:"+this.age+",我的毛色是:"+this.color+",我的性别:"+this.sex);
};
var cat1=new Cat();
cat1.play();


var cat2=new Cat();
cat2.color="黑";
cat2.play();




----->

alert(Person.prototype.isPrototypeOf(p1));//检测p1是否指向Person的原型对象 返回true/false

alert(p1.constructor==Penson);

alert(p1.hasOwnProperty("name"));//检测自身中是否存在name

alert("name" in p1);//检测整体内是否存在name


----->

如何判断一个属性不在自己的空间中,但是在原型中

function isPrototypeProperty(property){

if(!obj.has OwnProperty(property)){

return true;

}

}

alert(isPrototypeProperty("name",p1));




重写原型 //覆盖原型  原型对象紧跟重写原型不然会出错

function Cat(){};
Cat.prototype={
"constructor" : Cat,//手动指向Cat对象
"name" : "小红",
"age" : 16,
"sex" : "女",
"friends" : ['小白','小花','小黑'],
"say" : function(){
alert(this.name+"--->"+this.age);
}
};
var cat1=new Cat();
cat1.say();//返回   小红--->16





终极解决方案----封装(JavaScript基于组合的做封装

//将属性卸载构造函数中将方法写在原型中使用原型进行封装

function Person(name,age,sex,friends){
this.name=name;
this.age=age;
this.sex=sex;
this.friends=friends;
};
Person.prototype={
"constructor":Person,
"say":function(){
alert(this.friends);
}
};
var p1=new Person("刘德华",58,"男",["张学友","小花","小菊"]);
var p2=new Person("梅艳芳",58,"女",["王菲","邓丽君","小黑"]);
p1.say();
p2.friends.push("花花");
p2.say();

继承---基于原型链的继承/基于伪类的继承/基于组合的继承

function Parent(pv){
this.pv=pv;
}
parent.prototype.pSay=function(){
alert(this.pv);
}
function Son(name,ag,pv){
this.name=name;
this.age=age;
Parent.call(this.pv);//基于伪类的继承 (伪装)
Son.prototype=new Parent;//基于组合的继承                                                                                                  

}
Son.prototype.sSay=function(){
alert(this.name+"--->"+this.age);
}
var s1=new Son("小明",18,"父级");
s1.sSay();
alert(s1.pv);
s1.pSay();

0 0