javascript prototype prototype chain inheritance

Keywords: Attribute Javascript

  1. Each function object has a prototype property, but ordinary objects do not have a prototype property. There is a constructor under the prototype, pointing to this function

  2. Each person object has an internal attribute named [[prototype]], which points to the prototype object of the corresponding constructor. The prototype chain is based on \__

  3. Object functions inherit each other, both functions and objects

  4. Property lookup

    When you access a member of an object, you will first find whether it exists in the object
     If there is no current object, it will be found in the prototype object of the constructor
     If the prototype object is not found, find it on the prototype of the prototype object
     until Object prototype until the prototype of the object is null
    
    • 1
    • 2
    • 3
    • 4
Prototype chain:

When it comes to inheritance, JavaScript has only one structure: objects. Each instance object has a private attribute (called proto) that points to its prototype object. The prototype object also has a prototype object of its own, layer by layer up until the prototype object of an object is null. By definition, null has no prototype and serves as the last link in the prototype chain.

JavaScript instanceof operator code

The instanceof operator is used to test whether the prototype property appears anywhere in the object prototype chain

function instance_of(L, R) {//L for left expression, R for right expression
	var O = R.prototype;// Take the display prototype of R
	L = L.__proto__;// Take the implicit prototype of L
 	while (true) { 
 		if (L === null) 
    	return false; 
   		if (O === L)// Here's the point: when O is strictly equal to L, return true 
	    return true; 
	   L = L.__proto__; 
 	} 
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

inherit

		// Car.prototype.constructor = Car
		// Car.__proto__ = Function.prototype
		// Function.__proto__ = Function.prototype
		// Object.__proto__ === Function.prototype
		// Object.__proto__.__proto__ === Object.prototype
		// Object.prototype.__proto__ = null
	<span class="token keyword">function</span> <span class="token function">Car</span><span class="token punctuation">(</span>color<span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span>color <span class="token operator">=</span> color<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>

	Car<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">go</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">)</span>
	<span class="token punctuation">}</span>

	<span class="token keyword">function</span> <span class="token constant">BMW</span><span class="token punctuation">(</span>color<span class="token punctuation">)</span> <span class="token punctuation">{</span>
		Car<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> color<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>

	
	<span class="token comment">// May change the parent prototype</span>
	<span class="token comment">// BMW.prototype = Car.prototype </span>

	<span class="token comment">// call and new will cause the constructor of Car to execute twice</span>
	<span class="token comment">// BMW.prototype = new Car()</span>

	_proto <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>Car<span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span>
	_proto<span class="token punctuation">.</span>constructor <span class="token operator">=</span> <span class="token constant">BMW</span><span class="token punctuation">;</span>
	<span class="token constant">BMW</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> _proto<span class="token punctuation">;</span>

	<span class="token comment">// Inherit first and add BMW to the prototype</span>
	<span class="token constant">BMW</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">come</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'come'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token keyword">var</span> nss <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Car</span><span class="token punctuation">(</span><span class="token string">'blue'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token comment">// nss.__proto__ = Car.prototype</span>

	<span class="token keyword">var</span> wss <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BMW</span><span class="token punctuation">(</span><span class="token string">'red'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

	console<span class="token punctuation">.</span><span class="token function">dir</span><span class="token punctuation">(</span>Car<span class="token punctuation">)</span><span class="token punctuation">;</span>
	console<span class="token punctuation">.</span><span class="token function">dir</span><span class="token punctuation">(</span><span class="token constant">BMW</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'nss'</span><span class="token punctuation">,</span> nss<span class="token punctuation">)</span><span class="token punctuation">;</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'wss'</span><span class="token punctuation">,</span> wss<span class="token punctuation">)</span><span class="token punctuation">;</span>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

        </div>
					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-8cccb36679.css" rel="stylesheet">
            </div>

Posted by Hellbringer2572 on Sat, 21 Dec 2019 11:00:37 -0800