Research on the prototype attribute in JScript_javascript skillsJScript Prototype Research

We know that the prototype attribute of an object in JScript is used to return a reference to the prototype of the object type.

We use the prototype attribute to provide a basic set of functionality for an object's class. And new instances of the object "inherit" the operations assigned to the object's prototype. But how is this prototype implemented and managed?

As for the description of the prototype property of the object, the JScript manual says: All JScript internal objects have a read-only prototype property. Functionality (properties and methods) can be added dynamically to its prototype, but the object cannot be given a different prototype. However, user-defined objects can be assigned to new prototypes.
Let’s look at three classic usage examples of prototype attributes.
1. Add methods to the built-in objects of the script environment:

The code is as follows:

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. Add methods to user-defined classes:

The code is as follows:

function TestObject(name) 
{ 
this.m_Name = name; 
} 
TestObject.prototype.ShowName = function() 
{ 
alert(this.m_Name); 
};

3. Update the prototype of the custom class:

The code is as follows:

function TestObjectA() 
{ 
this.MethodA = function() 
{ 
alert('TestObjectA.MethodA()'); 
} 
} 
function TestObjectB() 
{ 
this.MethodB = function() 
{ 
alert('TestObjectB.MethodB()'); 
} 
} 
TestObjectB.prototype = new TestObjectA();

The third one looks familiar, right? Yes, it is the prototypal inheritance method we introduced earlier~~ But today we are not studying "inheritance". The reason why we can implement inheritance in this way is just a side effect of the prototype attribute.
Prototype also has a default attribute: constructor, which is used to represent the function that creates an object (that is, the constructor in our OOP). The constructor property is a member of all objects with a prototype property. They include all JScript internal objects except Global and Math objects. The constructor attribute holds a reference to the function that constructs a specific object instance.
After figuring out how to use the prototype attribute in JScript, let’s study it in depth.

In the last article, I listed the various uses of the prototype attribute in JScript, but the prototype thing was not created by JScript. JScript actually uses one of the prototype patterns in our design patterns. a derivative form. Now let me briefly talk about prototype pattern, and then look at what is prototype in JScript?!
What's prototype pattern?
Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype.
Use prototype instances to specify the types of objects to be created, and create new objects by copying these prototypes.
The prototype pattern allows an object to create another customizable object without knowing any details of how to create it. The working principle is: by passing a prototype object to the object to be created, the object to be created is Creation is performed by requesting prototype objects to copy themselves.
To continue to understand what prototype pattern is, you can refer to the article 'Design Pattern - Prototype'. It doesn't matter even if you don't understand Java, just treat its code as C#.
Have you figured out what a prototype is? Anyway, remember one thing, the implementation of prototype pattern depends on the clone operation. Of course, whether you want shallow copy or deep copy clone depends on your needs.
Let’s continue talking about the prototype in JScript. Why do we say it is different from the prototype in the prototype pattern?! This is not something I just said or blew out. Take a look at this example and you will know You may be confused:

The code is as follows:

<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>

Don’t worry, we haven’t started the example yet, we just gave a class we use for demonstration. What is RP? rpwt? Of course not, RP is ResearchPrototype. Okay, without further ado, let’s look at examples and result analysis.

The code is as follows:

<script language="javascript"> 
rp = new RP(); 
alert(RP.PropertyA); 
RP.MethodA(); 
alert(rp.PropertyA); 
rp.MethodA(); 
</script>

The running results appear:
1
RP.MethodA
100
this.MethodA
This %$@#^$%&^..., don’t worry, keep reading!

The code is as follows:

<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中原型继承法的理解因该没有任何的障碍了吧？同时也应该明白为什么原型继承法有那么大的天生缺陷了吧？当然如果有任何问题，欢迎继续讨论。
附演示示例源代码：

 
 
 
 
 
 
 
<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>