主页 > js >
找个熟悉 prototype.js 框架,外包整站前端js部分(prototype production)
25-02-03
18
在这篇文章中,我们将带领您了解找个熟悉prototype.js框架,外包整站前端js部分的全貌,包括prototypeproduction的相关情况。同时,我们还将为您介绍有关JavaScript继承
在这篇文章中,我们将带领您了解找个熟悉 prototype.js 框架,外包整站前端js部分 的全貌,包括prototype production 的相关情况。同时,我们还将为您介绍有关JavaScript继承背后的场景-prototype,__proto__, [[prototype]]、Jquery与Prototype混合用法对比_prototype、js 的prototype 属性和用法,外加__proto__、JScript中的prototype(原型)属性研究_javascript技巧JScript Prototype Research 的知识,以帮助您更好地理解这个主题。
本文目录一览:
找个熟悉 prototype.js 框架,外包整站前端js部分(prototype production) 我们是一个做前端开发的,但是对JS不熟悉,现在一个项目客户要求有些东西必须用prototype 框架,所以想找个人外包出去。
因为我们接这个项目的时候报价不含JS的东西,所以价格上可能不会太高。
主要做的内容如:弹出层,提示框,隐藏显示,tab切换等小东西。
有兴趣的朋友可以联系我。
QQ: 20547864
JavaScript继承背后的场景-prototype,__proto__, [[prototype]] 继承是面向对象编程语言的一大核心功能点,虽然JavaScript并不是一门真正意义上的面向对象的编程语言,但也通过某种手段实现了继承这一功能,最常见的JavaScript继承是通过原型链去实现,这就涉及到了prototype、__proto__、[[prototype]]三者之间的关系了。
如上图所示,理解JavaScript中的继承的关键是要理解母鸡如何产蛋的过程。
[[prototype]]、__proto__、prototype三者之间的联系
每个对象都可以有另一个对象作为其原型。然后前一个对象继承了它的所有原型属性。对象通过内部属性[[Prototype]]指定其原型。由[[Prototype]]属性连接的对象链称为原型链。
为了理解基于原型的继承是怎么样的,我们先来看一个例子。
var proto = {
describe: function () {
return ''name: ''+this.name;
}
};
var obj = {
[[Prototype]]: proto,
name: ''obj''
};
> obj.describe
[Function]
> obj.describe()
''name: obj''
__proto__是Object.prototype对象的访问者属性。它暴露了访问它的对象的内部原型([[Prototype]])
function Foo(name) {
this.name = name
this.whoAmI = function () {
return this.name
}
}
var b = new Foo(''b'')
var a = new Foo(''a'')
b.say = function () {
console.log(`Hi from ${this.whoAmI()}`)
}
console.log(a.__proto__ === Foo.prototype); // true
console.log(a.__proto__ === b.__proto__); // true
JavaScript引擎在对象b上添加了一个say方法,而不是在Foo原型对象(Foo.prototype)上 。
正如上图中看到的那样,a.__ proto__暴露了指向Foo.prototype对象的[[Prototype]]。同样,b.__ proto__也指向与a.__ proto__相同的对象。
通过构造函数来创建对象
除了通过指定模式创建对象之外,构造函数还可以执行另一个有用的操作 - 它会自动为新创建的对象设置原型对象。此原型对象存储在构造函数的原型对象属性中。
我们可以使用构造函数用b对象重写前面的例子。因此,对象a(原型)Foo.prototype的作用:
创建拥有原型对象属性x 及方法calculate() 的一个Foo对象。
function Foo(y) {
this.y = y;
}
Foo.prototype.x = 10;
Foo.prototype.calculate = function (z) {
return this.x + this.y + z;
};
使用对象Foo创建一个b对象实例。
var b = new Foo(20);
b.calculate(30); // 60
console.log(
b.__proto__ === Foo.prototype, // true
b.__proto__.calculate === Foo.prototype.calculate // true
b.__proto__.calculate === b.calculate, // true
Foo === b.constructor, // true
Foo === Foo.prototype.constructor, // true
);
正如上面打印出来的信息,对象b从Foo()继承了方法calculate。“Foo.prototype”自动创建一个特殊属性“constructor”,它是对构造函数本身的引用。实例b可以通过代理来找到它,并用来检测其构造函数。
JavaScript经典继承图
这也是通过构造函数来创建对象,但是在这一系列的对象和实例之间我们的焦点是放在原型链上。原型对象其实也是普通的对象,也有属于它们自己的属性。如果原型具有对其原型的非空引用,依此类推,则称为原型链。
以下是JavaScript经典继承的图表。构造函数Foo只是虚构类的类名。 foo对象是Foo的一个实例。
现在我们可以从图中看到为什么当我们从Dog类继承Animal 时,我们会这样做:
function Dog() {} // the usual constructor function
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
当通过new操作符创建一个实例的时候,都发生了些什么:
注意Foo.prototype 的原型(prototype )并不是来自原型链。Foo.prototype 指向原型链中的某些位置,但Foo的这个原型属性不是来自原型链。构成原型链的是proto 指向链,以及proto 指向的对象。比如从foo .__ proto__ ,链接到到foo .__ proto . proto__ ,等等,直到达到null(也就是咱们常说的原型链的顶部是null)。
proto and prototype的关系:
JavaScript的经典继承就像这样:我是一个构造函数,我只是一个函数,我持有一个原型引用,每当调用foo = new Foo()时,我会让foo .__ proto__指向我的原型对象。所以,Foo.prototype 与 obj.__proto__是两个不同的概念。Foo.prototype指示,当创建Foo的对象时,这是新对象的原型链应该指向的点 - 也就是说,foo .__ proto__应该指向Foo.prototype指向的位置。
如果需要添加一个方法怎么办?
如果woofie这个对象没有movie方法,它将通过原型链去寻找,就像任何原型继承场景一样,首先这个对象通过woofie.__proto__,它与Dog.prototype所指的对象相同。如果move方法不是这个对象的一个属性(意味着Dog这个类并没有move这个方法),则在原型链中上升一级(去原型链上寻找),即woofie .__ proto . proto__,或者与Animal.prototype相同。
Animal.prototype.move = function() { ... };
*尽管foo.constructor === Foo,但构造函数的属性并不是foo对象自己的属性,它实际上是通过寻找原型链获得的,即foo .__ proto__所指向的地方。对Function.constructor也是一样。
当我们看到Constructor.prototype,foo .__ proto__,Foo.prototype.constructor时,该图可能很复杂,有时会令人困惑。
要验证图表,请注意,即使foo.constructor将显示一个值,foo.constructor也不是foo自己的属性,而是通过跟踪原型链获得的,因为可以沟通过foo.hasOwnProperty(“constructor”)来进行验证。 *
总结
[[Prototype]] :对象通过其内部属性指定的原型对象
proto :创建的对象实例所拥有的内部属性,在语言层面可以直接访问[[Prototype]]
prototype :prototype是在使用new操作符创建对象时用于构建__proto__的对象,在实例化的对象上(或其他对象)不可使用,仅在构造函数上使用,因为它是从Funtion和Object上复制的。而__proto__随处可用
( new Foo ).__proto__ === Foo.prototype //true
( new Foo ).prototype === undefined //true
参考资料
http://speakingjs.com/es5/ind...
http://www.javascripttutorial...
http://stackoverflow.com/ques...
http://dmitrysoshnikov.com/ec...
https://www.quora.com/What-is...
http://www.jisaacks.com/proto...
http://kenneth-kin-lum.blogsp...
Jquery与Prototype混合用法对比_prototype 但问题来了,由于jQuery以及prototype都使用了美元符函数“$”作为选择器,在两者混合使用的时候$函数被重复定义了,结果导致其中一个框架不能使用。 不过很快,有很多人给出了解决方案,如比较流行的方案是这样的:
这样一来,你可以使用JQ来代替jQuery里的$函数名,而prototype的$函数照常使用,像这样:
尽管这种办法在一定程度上解决了两者的冲突,但作为jQuery的死忠,我是万分不情愿改写$为JQ或其他替代的字符。反之Prototype的粉丝估计也会这样想。那么,是不是有另一种解决方案,让两种框架能和谐共处呢?现在流行和谐嘛! 另类解法:先看一小段代码,猜一下会有什么效果?
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
应该很简单吧?效果是弹出一个窗品说“helloworld”。仔细看这一段Script,前后有两个括号组成,第一个括号里面是一个function对象,第二个括号是一个字符串。可以这样理解,第一个括号里面定义了一个函数,第二个括号里面给出的参数,两个加在一起实际上是完成了一次函数调用! 那现在来点真实的:
经测试,jQuery与Prototpye工作均正常。唯一以往常不一样的是,我们要在以前写的Jquery外面加多一个外套:
(function($){ //这里写Jquery代码 })(jQuery); (function($){ //这里写Jquery代码 })(jQuery);
这个外套巧妙地利用函数局部变量的有效范围保证你可以安心地按原来的方式写Jquery代码,这个方案更合适现有Jquery的代码升级至Jquery + prototypt。 不足之处: 还是不能解决Jquery插件的问题,这个问题是传统方法也无法解决的,只能够手动去修改插件脚本里面对$的调用,而根本的解决办法是以后的插件都用刚才那种另类的方式去写,才能保证其可用性。而Jquery UI现在好像是这样做了,我从Demo的源码里面看到的。
js 的prototype 属性和用法,外加__proto__ var ob = { };//超级简单的空对象
alert(JSON.stringify(ob.prototype)); // undefined
能够引用prototype的东西绝对是函数,绝对是函数,绝对是函数,prototype是属于函数的一个属性,prototype是属于函数的一个属性,prototype是属于函数的一个属性,能够引用它的只有·····函数····,能够引用它的只有·····函数·····,能够引用它的只有····函数····,函数,函数,函数,
prototype的应用
1.0
给原型对象增加函数,就是让对象拥有公用的函数。
例子:我给数组原型对象增加一个打乱数组的方法: //给数组原型增加一个打乱数组的函数
Array.prototype.shuffle = function(){ console.log(this) let value = this.valueOf(),len = this.length,temp,key; while(len--){ //随机生成数组的下标 key = Math.floor(Math.random()*len); //temp为中间交换变量 temp = value[key]; value[key]=value[len] value[len]=temp; } return value } let aa = [''1'',''2'',''3'',''4'',''5'']; console.log(aa.shuffle());2.0 给原型对象增加属性,也就是给对象增加公用的属性function fun(){ } fun。prototype.name = "小宋"; fun.prototype.arr = [''1'',''2'']; let a = new fun(); console.log(a.name) 3.0 最主要的属性实现原型继承
function P1(){ } function P2(){ }
//原型对象增加属性和方法
P1.prototype.name="郑1" P1.prototype.get = function(value){ return value }
//实例化P2构造函数的一个对象
var o1 = new P1();//这个对象应该包含所有原型对象的属性和方法
console.log(o1);
//给P2的原型对象赋值一个对象,相当于P1继承了o1的所有属性和方法
P2.prototype = o1;//这个式子,简单来讲就类似于a = b, b赋值给a这个总该明白吧?
//调用P2从o1继承过来的get函数
console.log(P2.prototype.get("123"));
//展示P2从o1继承过来的name属性
console.log(P2.prototype.name);
//用构造函数P2实例化一个o2对象
var o2 = new P2();
//P2的原型对象prototype既然已经继承了o1的所有属性和函数,那么依据P2所实例化出来的对象也都有o1的属性和函数了
console.log(o2) console.log(o2.name) console.log(o2.get(''456789''))Array.prototype是一个数组 String.prototype是一个字符串Object.prototype是一个对象 接下里有个疑问点是__proto__和arguments对象 prototype 是函数的一个属性(每个函数都有一个prototype属性),这个属性时一个指针, 指针,指向一个对象,它是显示修改对象的原型的属性。 __proto__是一个对象的内置属性(请注意:prototype是函数的内置属性,__proto__是对象的内置属性) 是js内部使用寻找原型链的属性。 使用chrome和ff都可以访问到__proto__属性,ie不可以。 new 一个函数的过程得 var Person = function(){} var p = new Person() 1.0 var p = {} 2.0 p.__proto__ = Person.prototype 3.0 Personal.call(p);也就是构造p,也可以称之为初始化p 4.0 return p 我们console.log(p.__proto__===Person.prototype) //返回的是true我们再来一个demo var person = function(){}; persona.prototype.sayName = function(){ console.log("my name is body") } person.prototype.age = 27; var p = new person(); p.sayName();p是一个引用指向person对象,我们在persona的原型商店一了一个sayName 方法和age属性,当我们执行p.age时,会先在this的内部查找(也就是构造函数内部) ,如果没有知道然后再沿着原型链向上追溯,这里的向上追溯是怎么向上的呢?这里就要使用 __proto__属性来链接到原型(也就是Personal.prototype)进行查找.最终在原型上找到了age。 js中_proto_和 prototype的区别和联系、 首先要明确两点 1.0 在js里,也是万物皆对象,方法(Function)是对象,方法的原型(Function.prototype) 是对象,因此,他们都会具有对象共有的特点。 既:对象具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造函数的原型这 这保证了实例能够访问在构造函数原型中定义的属性和方法 2.0,方法(Function) 方法这个特殊的对象,除了和其他对象一样有上述__proto__属性之外,还有自己的特有属性 --原型属性(prototype),这个属性是一个指针,指向一个对象,这个对象的用途就是包含 所有实例共享的属性和方法(我们把这个对象叫原型对象),原型对象也有一个属性,叫做 constructor,这个属性包含了一个指针,指回原构造函数。 function Foo(){} var f1 = new Foo(); var f2 = new Foo(); 1.0 构造函数Foo() 构造函数的原型属性Foo.prototype指向了原型对象,在原型对象里有共有的 方法,所有构造函数声明的实例(f1,f2)都可以共享这个方法。 2.0 原型对象Foo.prototype Foo.prototype保存着实例共享的方法,有一个指针constructor指回构造函数。 3.0 实例 f1和f2是Foo这个对象的两个实例,这两个对象也有属性__proto__,指 向构造函数的原型对象,这样子就可以像上面1所说的访问原型对象的所有 方法和属性了。 另外: 构造函数Foo()出来是方法,也是对象,他也有__proto__属性,指向谁呢? 指向它的构造函数的原型对象,函数的构造函数时function,因此这里的__proto__指向Function.prototype 其实出来Foo(),Function(),Object()也是一样的道理 原型对象也是对象啊,它的__proto__属性,又指向谁呢? 同理,指向它的构造函数的原型对象,这里是Object.prototype 最后,Object.prototype的__proto__属性指向null。 总结: 1.0 对象有属性__proto__,指向该对象的构造函数的原型对象。 2.0 方法除了有属性__proto__,还有属性prototype,prototype指向该方法的原型对象。
JavaScript中__proto__与prototype的关系
这里讨论下对象的内部原型(__proto__)和构造器的原型(prototype)的关系。
所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function)
1
2
3
4
5
6
7
8
9
Number.__proto__ === Function.prototype
// true
Boolean.__proto__ === Function.prototype
// true
String.__proto__ === Function.prototype
// true
Object.__proto__ === Function.prototype
// true
Function.__proto__ === Function.prototype
// true
Array.__proto__ === Function.prototype
// true
RegExp.__proto__ === Function.prototype
// true
Error.__proto__ === Function.prototype
// true
Date.__proto__ === Function.prototype
// true
JavaScript中有内置(build-in)构造器/对象共计12个(ES5中新加了JSON),这里列举了可访问的8个构造器。剩下如Global不能直接访问,Arguments仅在函数调用时由JS引擎创建,Math,JSON是以对象形式存在的,无需new。它们的__proto__是Object.prototype。如下
1
2
Math.__proto__ === Object.prototype
// true
JSON.__proto__ === Object.prototype
// true
这个内置的,我看了有人说9个有人说12个,我认为是9个
这说明什么呢?
所有的构造器都来自于Function.prototype,甚至包括根构造器Object及Function自身。所有构造器都继承了Function.prototype的属性及方法。如length、call、apply、bind(ES5)。
Function.prototype也是唯一一个typeof XXX.prototype为 “function”的prototype。其它的构造器的prototype都是一个对象。如下
1
2
3
4
5
6
7
8
9
10
console.log(
typeof
Function.prototype)
// function
console.log(
typeof
Object.prototype)
// object
console.log(
typeof
Number.prototype)
// object
console.log(
typeof
Boolean.prototype)
// object
console.log(
typeof
String.prototype)
// object
console.log(
typeof
Array.prototype)
// object
console.log(
typeof
RegExp.prototype)
// object
console.log(
typeof
Error.prototype)
// object
console.log(
typeof
Date.prototype)
// object
console.log(
typeof
Object.prototype)
// object
噢,上面还提到它是一个空的函数,alert(Function.prototype) 下看看。
知道了所有构造器(含内置及自定义)的__proto__都是Function.prototype,那Function.prototype的__proto__是谁呢?
相信都听说过JavaScript中函数也是一等公民,那从哪能体现呢?如下
1
console.log(Function.prototype.__proto__ === Object.prototype)
// true
这说明所有的构造器也都是一个普通JS对象,可以给构造器添加/删除属性等。同时它也继承了Object.prototype上的所有方法:toString、valueOf、hasOwnProperty等。
最后Object.prototype的__proto__是谁?
1
Object.prototype.__proto__ ===
null
// true
已经到顶了,为null。
二、所有对象的__proto__都指向其构造器的prototype
上面测试了所有内置构造器及自定义构造器的__proto__,下面再看看所有这些构造器的实例对象的__proto__指向谁?
先看看JavaScript引擎内置构造器
1
2
3
4
5
6
7
8
9
10
11
var
obj = {name:
''jack''
}
var
arr = [1,2,3]
var
reg = /hello/g
var
date =
new
Date
var
err =
new
Error(
''exception''
)
console.log(obj.__proto__ === Object.prototype)
// true
console.log(arr.__proto__ === Array.prototype)
// true
console.log(reg.__proto__ === RegExp.prototype)
// true
console.log(date.__proto__ === Date.prototype)
// true
console.log(err.__proto__ === Error.prototype)
// true
再看看自定义的构造器,这里定义了一个Person
1
2
3
4
5
function
Person(name) {
this
.name = name
}
var
p =
new
Person(
''jack''
)
console.log(p.__proto__ === Person.prototype)
// true
p是Person的实例对象,p的内部原型总是指向其构造器Person的prototype。
每个对象都有一个constructor属性,可以获取它的构造器,因此以下打印结果也是恒等的
1
2
3
4
5
function
Person(name) {
this
.name = name
}
var
p =
new
Person(
''jack''
)
console.log(p.__proto__ === p.constructor.prototype)
// true
上面的Person没有给其原型添加属性或方法,这里给其原型添加一个getName方法
1
2
3
4
5
6
7
8
function
Person(name) {
this
.name = name
}
// 修改原型
Person.prototype.getName =
function
() {}
var
p =
new
Person(
''jack''
)
console.log(p.__proto__ === Person.prototype)
// true
console.log(p.__proto__ === p.constructor.prototype)
// true
可以看到p.__proto__与Person.prototype,p.constructor.prototype都是恒等的,即都指向同一个对象。
这个是个重点啊!
如果换一种方式设置原型,结果就有些不同了
1
2
3
4
5
6
7
8
9
10
function
Person(name) {
this
.name = name
}
// 重写原型
Person.prototype = {
getName:
function
() {}
}
var
p =
new
Person(
''jack''
)
console.log(p.__proto__ === Person.prototype)
// true
console.log(p.__proto__ === p.constructor.prototype)
// false
这里直接重写了Person.prototype(注意:上一个示例是修改原型)。输出结果可以看出p.__proto__仍然指向的是Person.prototype,而不是p.constructor.prototype。
这也很好理解,给Person.prototype赋值的是一个对象直接量{getName: function(){}},使用对象直接量方式定义的对象其构造器(constructor)指向的是根构造器Object,Object.prototype是一个空对象{},{}自然与{getName: function(){}}不等。如下
1
2
3
4
var
p = {}
console.log(Object.prototype)
// 为一个空的对象{}
console.log(p.constructor === Object)
// 对象直接量方式定义的对象其constructor为Object
console.log(p.constructor.prototype === Object.prototype)
// 为true,不解释
上面代码中用到的__proto__目前在IE6/7/8/9中都不支持。IE9中可以使用Object.getPrototypeOf(ES5)获取对象的内部原型。
1
2
3
var
p = {}
var
__proto__ = Object.getPrototypeOf(p)
console.log(__proto__ === Object.prototype)
// true
对象字面量表示法是首选的构造函数
JavaScript语言九种内建的构造器:Object()
, Array()
, String()
, Number()
, Boolean()
, Date()
, Function()
, Error()
以及 RegExp()
。当我们需要创建这些值的时候,我们可以自由选择使用字面量或者构造器。但是相同情况下,字面量对象不仅易读,而且运行速度更快,因为他们可以在解析的时候被优化。所以当你需要使用简单对象的时候就使用字面量吧。
JScript中的prototype(原型)属性研究_javascript技巧JScript Prototype Research 我们知道jscript中对象的prototype属性,是用来返回对象类型原型的引用的。
我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会"继承"赋予该对象原型的操作。但是这个prototype到底是怎么实现和被管理的呢? 对于对象的prototype属性的说明,JScript手册上如是说:所有 JScript 内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法),但该对象不能被赋予不同的原型。然而,用户定义的对象可以被赋给新的原型。 下面我们看三个经典的prototype属性的使用示例。 1、为脚本环境内建对象添加方法:
代码如下:
Array.prototype.max = function()
{
var i, max = this[0];
for (i = 1; i < this.length; i++)
{
if (max < this[i])
max = this[i];
}
return max;
}; 登录后复制
2、为用户自定义类添加方法:
代码如下:
function TestObject(name)
{
this.m_Name = name;
}
TestObject.prototype.ShowName = function()
{
alert(this.m_Name);
}; 登录后复制
3、更新自定义类的prototype:
代码如下:
function TestObjectA()
{
this.MethodA = function()
{
alert('TestObjectA.MethodA()');
}
}
function TestObjectB()
{
this.MethodB = function()
{
alert('TestObjectB.MethodB()');
}
}
TestObjectB.prototype = new TestObjectA(); 登录后复制
第三个很眼熟吧?对啊,它就是我们前面介绍的原型继承法呀~~ 不过今天我们不是研究"继承",之所以可以这样来实现一种继承,只是利用了prototype属性的一个副作用而已。 prototype还有一个默认的属性:constructor,是用来表示创建对象的函数的(即我们OOP里说的构造函数)。constructor属性是所有具有prototype属性的对象的成员。它们包括除Global和Math对象以外的所有JScript内部对象。constructor属性保存了对构造特定对象实例的函数的引用。 弄清楚了JScript中prototype属性怎么使用后,下面我们再来深入的研究它。 上次的文章中我罗列了一下prototype属性在JScript中的各种用法,但是prototype这个东西却不是JScript创造出来的,JScript实际上是使用了我们设计模式中prototype pattern的一种衍生形式。下面我先简单的说一下prototype pattern,然后再来看到底JScript中的prototype是怎么回事?! What''s prototype pattern? Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype. 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。 原型模式允许一个对象再创建另外一个可定制的对象,根本无需知道任何如何创建的细节,工作原理是:通过将一个原型对象传给那个要发动创建的对象,这个要发动创建的对象通过请求原型对象拷贝它们自己来实施创建。 继续了解到底什么是prototype pattern,可以参看''设计模式之Prototype(原型)''这篇文章,即使不懂Java也没有关系,把它的代码都当C#看就行了。 搞清楚什么是原型了吧?反正记着一点,prototype pattern是的实现是依赖于clone这个操作的,当然要shallow copy还是deep copy的clone看自己的需要了。 下面我们继续说JScript里的prototype,为什么我们说它和prototype pattern里的prototype不一样呢?! 这个不是我说就说出来的,也不是我吹出来的,看看这个示例,你就能大概糊涂:
立即学习 “Java免费学习笔记(深入)”;
代码如下:
<script language="javascript">
function RP()
{
RP.PropertyA = 1;
RP.MethodA = function()
{
alert("RP.MethodA ");
};
this.PropertyA = 100;
this.MethodA = function()
{
alert("this.MethodA");
};
}
RP.prototype.PropertyA = 10;
RP.prototype.MethodA = function()
{
alert("RP.prototype.MethodA");
};
</script> 登录后复制
不要着急,还没有开始做示例,只是给出了我们用来演示的一个类。RP是什么?rpwt吗?当然不是了,RP是ResearchPrototype了。好了不废话了,看示例及结果分析。
代码如下:
<script language="javascript">
rp = new RP();
alert(RP.PropertyA);
RP.MethodA();
alert(rp.PropertyA);
rp.MethodA();
</script> 登录后复制
运行结果闪亮登场: 1 RP.MethodA 100 this.MethodA 这个%$@#^$%&^...,不要着急,继续看哦!
代码如下:
<script language="javascript">
rp = new RP();
delete RP.PropertyA;
alert(RP.PropertyA);
delete RP.MethodA;
RP.MethodA();
delete rp.PropertyA;
alert(rp.PropertyA);
delete rp.MethodA;
rp.MethodA();
</script> 登录后复制
运行结果再次登场: undefined A Runtime Error has occurred. Do you wish to Debug? Line: 32 Error: Object doesn''t support this property or method 10 RP.prototype.MethodA 好玩吧,看出来什么名堂了吗?这里的RP.PropertyA和RP.MethodA只是用来做参照的,可是怎么把this.PropertyA和this.MethodA都delete了,还能出来结果,而且还是prototype导入的属性和方法呢? 这就是JScript的prototype和prototype pattern中prototype最大的不同了,JScript中的这个所谓的prototype属性其实是个语言本身支持的特性,这里没有发生任何的copy,不管shallow还是deep的。对于JScript的解释引擎,它在处理"."或"[keyName]"引用的对象的属性和方法时,先在对象本身的实例(this)中查找,如果找到就返回或执行。如果没有查找到,就查找对象的prototype(this.constructor.prototype)里是否定义了被查找的对象和方法,如果找到就返回或执行,如果没有查找到,就返回undefined(对于属性)或runtime error(对于方法)。 正因为prototype导入类实例的属性或方法是动态查找的,所以我们才能对系统内部对象添加prototype属性和方法,比如给String对象添加trim方法:
代码如下:
<script lanuage="javascript">
String.prototype.trim()
{
return this.replace(/(^\s+)|(\s+$)/g, "");
}
</scritp> 登录后复制
显然JScript中的这种用法也是prototype pattern中的prototype不能解释和支持的。 这下对于JScript OOP中原型继承法的理解因该没有任何的障碍了吧?同时也应该明白为什么原型继承法有那么大的天生缺陷了吧?当然如果有任何问题,欢迎继续讨论。 附演示示例源代码:
JScript Prototype Research
<script language="javascript">
function RP()
{
RP.PropertyA = 1;
RP.MethodA = function()
{
alert("RP.MethodA ");
};
this.PropertyA = 100;
this.MethodA = function()
{
alert("this.MethodA");
};
}
RP.prototype.PropertyA = 10;
RP.prototype.MethodA = function()
{
alert("RP.prototype.MethodA");
};
</script>
<script language="javascript">
rp = new RP();
delete RP.PropertyA;
alert(RP.PropertyA);
delete RP.MethodA;
RP.MethodA();
delete rp.PropertyA;
alert(rp.PropertyA);
delete rp.MethodA;
rp.MethodA();
</script>
登录后复制
关于找个熟悉 prototype.js 框架,外包整站前端js部分 和prototype production 的问题我们已经讲解完毕,感谢您的阅读,如果还想了解更多关于JavaScript继承背后的场景-prototype,__proto__, [[prototype]]、Jquery与Prototype混合用法对比_prototype、js 的prototype 属性和用法,外加__proto__、JScript中的prototype(原型)属性研究_javascript技巧JScript Prototype Research 等相关内容,可以在本站寻找。