Web "front-end JavaScript interview skills" study notes (2)-Prototype and prototype chain

1. How to accurately determine if a variable is an array type
2. Write an example of a prototype chain inheritance
3. Describe the process of a new object

Knowledge Point #####

• constructor function

function Foo (name,age) {    this.name=name    this.age=age    this.class= ' class-1 '  //return this  // The default is this line}var f=new foo (' Zhangsan ',//var f1=new foo (' Lisi ', 22)//Create multiple objects

　　

• Constructors-Extensions

var a={} //其实是var a=new Object()的语法糖var b=[] //其实是var b=new Array()的语法糖function Foo(){...} //其实是var Foo=new Function(...)//使用instanceof判断一个函数是否是一个变量的构造函数

All reference types (objects, arrays, functions) have constructors, A's constructor is object (), B's constructor is array (), and Foo's constructor is function (). So if you want to determine if a variable is an array, you can use

var a={}a instanceof Array   //false

• prototype rules and instances

  • All reference types have object attributes and are free to extend properties (except null)

  • All reference types have a __proto__//implicit prototype property, property value is a normal object

  • All functions have a prototype/display prototype property, and the property value is also a normal object

  • The __proto__ property value for all reference types The property value for prototype that points to its constructor

  • When attempting to get a property of a reference type, if the object itself does not have this property, it will look for the

     __proto__  (that is, its constructor's prototype): Javascript;gutter:true; " >var Obj={};obj.a=100;var arr=[];arr.a=100;function fn () {}fn.a=100console.log (obj.__proto__) Console.log (arr.__ proto__) Console.log (fn.__proto__) console.log (fn.prototype) console.log (obj.__proto__===object.prototype)//true 

constructor function Foo (name,age) {    this.name=name}foo.prototype.alertname=function () {    ///Because prototype is a normal object, So you can also extend the property    alert (this.name)   }    //Create instance var f=new Foo (' Zhangsan ') f.printname=function () {Console.log ( this.name)}//Test f.printname ()    //zhangsanf.alertname ()    //f has no alertname attribute, so go to f._proto_ and find in Foo.prototype

　　

Called by the object in the prototype method, this points to the object

The property of the Loop object itself Var itemfor (item in f) {/    /Advanced Browser has shielded the properties from the prototype in the for in    ///But here is the recommendation to add this judgment to ensure the robustness of the program    if ( F.hasownproperty (item)) {        Console.log (item)    }}

　　

• Prototype chain

//在刚刚的代码中加入f.toString()    //要去f.__proto__.__proto__中查找

All reference types have __proto__ attributes, and the __proto__ property value points to the property value of its constructor prototype , so when the F does not exist, it is f.__proto__ queried in that case Foo.prototype and Foo.prototype no ToString is found. Because Foo.prototype it is also an object, the property value of its implicit prototype points to the __proto__ property value of its constructor object prototype .

Try Console.log (Object.prototype) console.log (object.prototype.__proto__)    //To avoid a dead loop, so output null here

Prototype chain

• instanceof
  The method used to determine which constructor the reference type belongs to
  f instanceof FooJudgment logic is f a layer of __proto__ upward can correspond to, and Foo.prototype then try to judgef instanceof Object

Problem Solving #####

1. How to accurately determine if a variable is an array type
Using instanceof

var arr=[]arr instanceof Array    //truetypeof arr    //object    typeof cannot accurately determine whether an array

　　

2. Write an example of a prototype chain inheritance

Simple example, compared to low, there are more practical examples below//animal function Animal () {    this.eat=function () {        console.log (' Animal eat ')    }}// Dog function Dog () {    this.bark=function () {        console.log (' dog bark ')    }}dog.prototype=new Animal ()//Husky VAR Hashiqi=new Dog ()

　　

Encapsulates a DOM query function Elem (ID) {    this.elem=document.getelementbyid (ID)}elem.prototype.html=function (val) {    var Elem=this.elem    if (val) {        Elem.innerhtml=val        return this    //chained operation    }else{        return elem.innerhtml    }}elem.prototype.on=function (TYPE,FN) {  var elem=this.elem  Elem.addeventlistener ( TYPE,FN)  return this   //chain Operation}var div1=new Elem (' div1 ')//Console.log (div1.html ());//div1.html (' <p> Hello</p> '),//Div1.on (' click ', function () {//   alert (' clicked ')/});d Iv1.on (' click ', function () {alert (' Clicked ')}). html (' <p> chain Operation </p> ')//Add the return this to the previous function, and return the current object when called by Div1, i.e. DIV1, you can implement chained operation

　　

3. Describe the process of a new object

function Foo (name,age) {//this={}    this.name=name    this.age=age    this.class= ' class-1 '  //return This}var f=new foo (' Zhangsan ', +)//var f1=new foo (' Lisi ', 22)//Create multiple objects

　　

Create a new object
This points to this new objectthis={}
Execute code, that is, assign a value to thisthis.xxx=xxx
return thisreturn this

Yangkeloff
Links: https://www.jianshu.com/p/dc3015d68c46
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

Web "front-end JavaScript interview skills" study notes (2)-Prototype and prototype chain