当前位置：网站首页>About prototype and prototype chain

About prototype and prototype chain

2022-06-11 09:38:00 【Snatch bamboo shoots 123】

Catalog

About js Objects in the
- Constructor create object
- - Setting method of object properties
  - Implementation inheritance
Prototype
Prototype chain
Properties,

This blog reference ：
mqyqingfeng Of github Blog
Ruan Yifeng 《ECMAScript 6 introduction 》

About js Objects in the

js It is an object-oriented language , But in ES6 Before ,js Cannot create class , You can't create objects through classes , But through prototype

Constructor create object

because ES6 There is no concept of class in the previous syntax , So you can use constructors instead of classes to create objects , Grammar format

function  Constructors (){
    
	this. attribute ;
	this. Method ;
}
// Create instantiated objects 
var  Object name =new  Constructors ()

The difference between a constructor and a normal function ： To invoke the former, you need to pass new keyword

Setting method of object properties

//1.  Write properties through constructors 
 Constructors .prototype. Property name 
//2.  Add attributes when defining instance objects 
 Object name . Property name

Implementation inheritance

Concept ： Inherit , That is, reuse some original functions , Subclasses get the properties and methods under the parent class through inherited methods
Realization way ： By calling directly in the constructor

adopt call() Method to implement inheritance

function Fo(){
    
	this.name="Tom"
	this.say=function(){
    
		console.log(` Hello everyone , My name is ${
      this.name}`)
	}
}
function Ch(){
    
	// Call constructor , change this Point to 
	Fo.call(this)
	this.name="Jerry"
	this.age=19
}
Ch.prototype.showage=function(){
    
	console.log(` My age is ${
      this.age}`)
}
let myobj1=new Fo("Tom")
let myobj2=new Ch("Jerry")
myobj1.say()
myobj2.say()
myobj2.showage()

The problem is
The problem of constructor parameter passing is not solved
Note the initial capitalization of the constructor

Inheritance through prototype objects
After creating a constructor , Its default prototype object is Object, We can go through .prototype Property to modify its prototype object , So that the instance object created by this constructor has some properties and methods specified in

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> This is a html5 demo</title>
</head>
<body>
	<script> function Animal(name,height){
       this.name=name this.height=height this.bev=function(){
       console.log(" I like playing ") } } function Cat(){
       this.age=3 this.say=function(){
       console.log(" Meow meow ") } } Cat.prototype=new Animal(" Little mi ",23) cat1=new Cat() console.log(cat1.name) cat1.bev() cat1.say() </script>
</body>
</html>

Chrome Browser run results
Insert picture description here

Prototype

Concept ： every last js object (null With the exception of ) Another object will be associated with it when it is created , This object is what we call prototype . Every object will be from prototype " Inherit " attribute

Create a new js Object time , Even if the new object is empty , When we output it , We found that it has an attribute prototype
Insert picture description here
Although we are not here obj Object , But you can also call some methods

In fact, these methods are from prototype attribute Inherited from , in other words prototype attribute yes obj Prototype object

Prototype chain

Concept ： A chain of interrelated prototypes

stay js in , Almost all objects are Object Instance of type , They all start from Object.prototype Inherit properties and methods .

Let's use an example to illustrate the situation

var date=new Date()

date.__proto__===Date.prototype// true
Date===Date.prototype  //false
Date.prototype.__proto__===Object.prototype  //true
Date.prototype===Object  //false

typeof date  //'object' Instance object 
typeof Date  //'function' Constructors 
typeof Date.prototype  //'object' Prototype object 
typeof Object  //'function' Constructors 
typeof Object.prototype  //'object' Prototype object 
typeof null  //'object'

actually ,object It's just one. js Built in constructor

Above we define an instance object , Let's take a look at such a situation

date.toString()

actually ,Date Method is not defined in constructor , It is Object The method defined in the constructor , Let's take a look through a flow chart , To pass through date The instance object calls the method ,js What has been done internally

Insert picture description here

From the above figure, we can see , When date There is no... In the instance object toString() When the method is used ,js The method will be found in the upstream prototype object along the prototype chain , stay Object Prototype object Object.prototype The method was found in , Completion of invocation . actually , The prototype chain is an example of inheritance

Properties,

prototype

Each function has one prototype attribute , This attribute points to an object , That is, the prototype of the instance created by calling this constructor

typeof Date.prototype  //"object"

proto

every last js object ( except null ) All have a property , It's called __proto__, This property points to the prototype of the object .

Date.prototype.__proto__===Object.prototype  //true
typeof Object.prototype //"object"

constructor attribute

Each prototype has a constructor Property points to the associated constructor .

Date.prototype.constructor===Date// true

原网站

版权声明
本文为[Snatch bamboo shoots 123]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/162/202206110914077992.html