JS中的phototype是JS中比较难理解的一个部分
[size=medium][b]一、知识点[/b][/size]
本文基于下面几个知识点:
1. 原型法设计模式
原型法的主要思想是:
现在有一个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。
我们称B的原型为A。
2. javascript的方法可以分为三类:
1) 类方法
2) 对象方法
3) 原型方法
例子:
[size=medium][b]二、正式开始[/b][/size]
1、prototype是什么含义?
Javascript中的每个对象都有prototype属性。
Javascript中对象的prototype属性的解释是:返回 “对象原型” 的引用。
2、什么是函数的“对象原型”(prototype)?
Function.prototype 属性可以被使用 new 关键字创建的 Function 的实例所继承。
Function.prototype 属性不能被删除。
prototype 不应与继承混淆:
A.prototype = new B();
A 的 prototype 为 B 的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。
A 能使用 B 的方法和属性,这里强调的是克隆而不是继承。
可以出现这种情况:
A 的prototype是 B 的实例,同时 B 的prototype也是 A 的实例。
例子:
首先定义 Base 类。
然后定义 Extended,以 Base 的一个实例作为 Extended 的函数原型。
那么就会有一个问题,[color=brown]如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样?[/color]
下面是扩展实验2:
实验证明:函数运行时会先去本体的函数中去找,如果找到则运行。找不到则去prototype中寻找函数。
那么又会有一个新的问题:
[color=brown]如果我想使用 Extended 的一个实例 instance 调用 Base 的方法showMsg怎么办? [/color]
答案是可以使用 call:
下面这个代码如果理解清晰,那么对“类方法、原型方法、对象方法”就已经理解了:
函数的 prototype 对象,是一个普通的对象。
函数的 prototype 对象,不是函数对象,不具有函数对象的 prototype 属性。
[size=medium][b]三、面向对象编程:prototype 中的 function 与 this [/b][/size]
prototype 既然是用来共享于函数的实例之间,
那么在 prototype 的 function 类型中使用 this 是面向对象编程不可缺少的实现。
因为 this 总是指向 function 的不同实例。但是可以只写一次 this。
—————————————
javascript 函数基础系列文章
[url=http://lixh1986.iteye.com/blog/1955314]1、JavaScript之变量的作用域[/url]
[url=http://lixh1986.iteye.com/blog/2028899]2、javascript之变量类型与变量声明及函数变量的运行机制[/url]
[url=http://lixh1986.iteye.com/blog/1947017]3、javaScript之function定义[/url]
[url=http://lixh1986.iteye.com/blog/1896682]4、javascript之function的prototype对象[/url]
[url=http://lixh1986.iteye.com/blog/1891833]5、javascript之function的(closure)闭包特性[/url]
[url=http://lixh1986.iteye.com/blog/1960343]6、javascript之function的this[/url]
[url=http://lixh1986.iteye.com/blog/1943409]7、javascript之function的apply(), call()[/url]
___________
javascript 面向对象编程系列文章:
[url=http://lixh1986.iteye.com/blog/1958956]1、javaScript之面向对象编程[/url]
[url=http://lixh1986.iteye.com/blog/2332467]2、javascript之面向对象编程之属性继承[/url]
[url=http://lixh1986.iteye.com/blog/2348442]3、javascript之面向对象编程之原型继承[/url]
-
转载请注明,
原文出处:http://lixh1986.iteye.com/blog/1896682
--
引用地址:
[url]http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html[/url]
-
[size=medium][b]一、知识点[/b][/size]
本文基于下面几个知识点:
1. 原型法设计模式
原型法的主要思想是:
现在有一个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。
我们称B的原型为A。
2. javascript的方法可以分为三类:
1) 类方法
2) 对象方法
3) 原型方法
例子:
function People(name){
this.name=name;
//对象方法
this.Introduce=function(){
console.log("My name is "+this.name);
}
}
//类方法
People.Run=function(){
console.log("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
console.log("我的名字是"+this.name);
}
//测试
var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese();
[size=medium][b]二、正式开始[/b][/size]
1、prototype是什么含义?
Javascript中的每个对象都有prototype属性。
Javascript中对象的prototype属性的解释是:返回 “对象原型” 的引用。
2、什么是函数的“对象原型”(prototype)?
Function.prototype 属性可以被使用 new 关键字创建的 Function 的实例所继承。
Function.prototype 属性不能被删除。
prototype 不应与继承混淆:
A.prototype = new B();
A 的 prototype 为 B 的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。
A 能使用 B 的方法和属性,这里强调的是克隆而不是继承。
可以出现这种情况:
A 的prototype是 B 的实例,同时 B 的prototype也是 A 的实例。
例子:
function Base(){
this.showMsg = function(){.
console.log("Base::showMsg");
}
}
function Extended(){}
Extended.prototype = new Base();
var instance = new Extended();
instance.showMsg(); // 显示 Base::showMsg
首先定义 Base 类。
然后定义 Extended,以 Base 的一个实例作为 Extended 的函数原型。
那么就会有一个问题,[color=brown]如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样?[/color]
下面是扩展实验2:
function Base(){
this.showMsg = function(){
console.log("Base::showMsg");
}
}
function Extended(){
this.showMsg =function (){
console.log("Extended::showMsg");
}
}
Extended.prototype = new Base();
var instance = new Extended();
instance.showMsg(); //显示:Extended::showMsg
实验证明:函数运行时会先去本体的函数中去找,如果找到则运行。找不到则去prototype中寻找函数。
那么又会有一个新的问题:
[color=brown]如果我想使用 Extended 的一个实例 instance 调用 Base 的方法showMsg怎么办? [/color]
答案是可以使用 call:
Extended.prototype = new Base();
var extend = new Extended();
var base = new Base();
base.showMsg.call(extend); //显示:Base::showMsg
下面这个代码如果理解清晰,那么对“类方法、原型方法、对象方法”就已经理解了:
//
//Base
function Base(name){
this.name = name || "BASE";
this.showMsg = function(){
console.log(this.name, "::showMsg");
}
this.baseShowMsg = function(){
console.log(this.name, "::baseShowMsg");
}
}
Base.showMsg = function(){
console.log(this.name, "::showMsg static");
}
Base.prototype.protoShowMsg = function(){
console.log(this.name, "::protoShowMsg");
}
//
//Extended
function Extended(name){
this.name = name || "Extended";
this.showMsg =function (){
console.log(this.name, "::showMsg");
}
}
Extended.showMsg = function(){
console.log(this.name, "::showMsg static");
}
Extended.prototype = new Base();
//Test
var base= new Base();
var extended = new Extended();
extended.showMsg(); //显示: Extended ::showMsg
extended.baseShowMsg(); //显示: Extended ::baseShowMsg
extended.protoShowMsg(); //显示: Extended ::protoShowMsg
Base.showMsg.call(extended); //显示: Extended ::showMsg static
base.showMsg.call(extended); //显示: Extended ::showMsg
//
函数的 prototype 对象,是一个普通的对象。
函数的 prototype 对象,不是函数对象,不具有函数对象的 prototype 属性。
[size=medium][b]三、面向对象编程:prototype 中的 function 与 this [/b][/size]
prototype 既然是用来共享于函数的实例之间,
那么在 prototype 的 function 类型中使用 this 是面向对象编程不可缺少的实现。
因为 this 总是指向 function 的不同实例。但是可以只写一次 this。
//
var Person = function(name) {
this.name = name;
};
Person.prototype.getName = function() {
// use "this" in prototype.
return this.name;
};
//test
var john = new Person("John");
console.log(john.getName()); // John
var Tomi = new Person("Tomi");
console.log(Tomi.getName()); // Tomi
—————————————
javascript 函数基础系列文章
[url=http://lixh1986.iteye.com/blog/1955314]1、JavaScript之变量的作用域[/url]
[url=http://lixh1986.iteye.com/blog/2028899]2、javascript之变量类型与变量声明及函数变量的运行机制[/url]
[url=http://lixh1986.iteye.com/blog/1947017]3、javaScript之function定义[/url]
[url=http://lixh1986.iteye.com/blog/1896682]4、javascript之function的prototype对象[/url]
[url=http://lixh1986.iteye.com/blog/1891833]5、javascript之function的(closure)闭包特性[/url]
[url=http://lixh1986.iteye.com/blog/1960343]6、javascript之function的this[/url]
[url=http://lixh1986.iteye.com/blog/1943409]7、javascript之function的apply(), call()[/url]
___________
javascript 面向对象编程系列文章:
[url=http://lixh1986.iteye.com/blog/1958956]1、javaScript之面向对象编程[/url]
[url=http://lixh1986.iteye.com/blog/2332467]2、javascript之面向对象编程之属性继承[/url]
[url=http://lixh1986.iteye.com/blog/2348442]3、javascript之面向对象编程之原型继承[/url]
-
转载请注明,
原文出处:http://lixh1986.iteye.com/blog/1896682
--
引用地址:
[url]http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html[/url]
-