Detailed explanation of javascript prototype prototype (basic course)

Prototype Prototype is a particularly important concept in JavaScript, which must be mastered. Without a good grasp, it is basically impossible to further use or learn js well, and this concept is slightly difficult, which may be difficult for first time users. It’s a bit difficult for friends who have contacted me. Let’s briefly introduce the usage of prototype prototype through code examples.

A brief introduction to the prototype prototype of javascript:
The prototype prototype is a particularly important concept in javascript and must be mastered. , without a good grasp, it is basically impossible to further use or learn js well, and this concept is slightly difficult, which may be a bit difficult for friends who are new to it. Let’s briefly introduce the prototype through code examples. Usage of prototypes.

1. Basic concepts:

Every function has a prototype attribute.
This attribute is a pointer that can point to an object, and this object will be shared by the object instance created by the constructor, that is, it will inherit this object.
Summary: The object pointed to by prototype is shared by the object instances created by the constructor.
The created object instance has an internal property [[Prototype]], which is a pointer pointing to the object pointed to by the constructor prototype (prototype).
Look at a piece of code first:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
antzone.prototype.getName=function(){
 return this.webname;
}
var oantzone=new antzone("PHP中文网",10);
console.log(oantzone.getName());
</script>

2. Code example:
Example one:

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
var oantzone=new antzone("PHP中文网",10);
antzone.prototype=obj;
console.log(oantzone.address);

Looking at the above code, many friends may think that the output value is "Xuzhou, Jiangsu Province", but the actual output content is undefined. This is because when using the constructor to create the object oantzone, the internal properties of the oantzone object [[ Prototype]] will point to the object pointed to by the prototype prototype of the antzone() constructor. Later, antzone.prototype=obj is the prototype of the reset constructor, and the built-in attribute [[Prototype]] of oantzone still points to the original object. , naturally oantzone.address is undefined.
Example 2:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
antzone.prototype=obj;
var oantzone=new antzone("PHP中文网",10);
console.log(oantzone.webname+oantzone.address);
</script>

The only difference between this code and the previous code is that the eighth and ninth lines are After a little exchange, you can output "Xuzhou, Jiangsu Province". This is not difficult to understand, because the object instance is created after resetting the prototype.
Example 3:

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
antzone.prototype.add=obj;
var oantzone=new antzone("PHP中文网",10);
console.log(oantzone.add.address);

The above code only modifies the object prototype, rather than resetting the object prototype.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About simple calls to obtain JSON data in JS (the code is attached, simple and crude)

Details Introducing the use of EL expressions in JS

##Entry-level video.jsUsage notes (code attached)

The above is the detailed content of Detailed explanation of javascript prototype prototype (basic course). For more information, please follow other related articles on the PHP Chinese website!