Function Advanced ② -- (prototype chain properties, instance, promotion, execution context)

Prototype chain property problem

1. When reading the property value of an object: it will be automatically searched in the prototype chain
2. When setting the property value of the object: the prototype chain will not be searched, if the current object does not have this property, directly add this property and set its value
3. Methods are generally defined in the prototype, and properties are generally defined on the object itself through the constructor

The above rules can be found from the following examples:

  function Fn() {
    
    

  }
  Fn.prototype.a = 'xxx'
  var fn1 = new Fn()
  console.log(fn1.a)  //xxx

  var fn2 = new Fn()
  fn2.a = 'yyy'
  console.log(fn1.a, fn2.a)  //xxx  yyy

In fn2:

instanceof

1. How is instanceof judged?

• Expression: A instanceof B
• Returns true if the explicit prototype object (prototype) of the B constructor is on the prototype chain of the A object (in other words, there is an intersection), otherwise returns false

2. Function is an instance generated by new itself

We can understand instanceof through the following two examples:
①

  /*
  案例1
   */
  function Foo() {
    
      }
  var f1 = new Foo()
  console.log(f1 instanceof Foo) // true
  console.log(f1 instanceof Object) // true

The prototype chain is also called the implicit prototype chain, so our attention should be paid to the line with __proto__ as the connection and prototype as the node, that is the prototype chain.

②

  /*
  案例2
   */
  console.log(Object instanceof Function) // true
  console.log(Object instanceof Object) // true
  console.log(Function instanceof Function) // true
  console.log(Function instanceof Object) // true

  function Foo() {
    
    }
  console.log(Object instanceof  Foo) // false

Variable hoisting and function hoisting

1. Variable declaration hoisting

• Variables defined (declared) through var can be accessed before the definition statement
• Value: undefined

2. function declaration hoisting

• Functions declared through function can be called directly before
• value: function definition (object)

verify:

<script type="text/javascript">
  console.log('-----')
  /*
  面试题 : 输出 undefined
   */
  var a = 3
  function fn () {
    
    
    console.log(a)
    var a = 4
  }
  fn()

  console.log(b) //undefined  变量提升
  fn2() //可调用  函数提升
  // fn3() //不能  变量提升

  var b = 3
  function fn2() {
    
    
    console.log('fn2()')
  }

  var fn3 = function () {
    
    
    console.log('fn3()')
  }
</script>

There is a required point:

var fn3 = function () {
    
    
    console.log('fn3()')
  }

A function declared like this is hoisted as a variable, not as a function. If you want function hoisting, you can only use function declaration.

execution context

①Code classification (location)

• global code
• function (local) code

② Global execution context

• Determine window as the global execution context before executing global code
• Preprocessing global data
  • The global variable defined by var==>undefined, added as a property of window
  • The global function declared by function ==> assignment (fun), added as a method of window
  • this==>assignment(window)
• Start global code execution

③ function execution context

• Before calling the function and preparing to execute the function body, create the corresponding function execution context object (virtual, a closed area that exists in the stack and is not visible to the outside world)
• Preprocessing local data
  • Formal parameter variable ==> assignment (actual parameter) ==> attribute added as execution context
  • arguments==>Assignment (list of arguments), added as a property of the execution context
  • Local variables defined by var==>undefined, added as a property of the execution context
  • Function declared by function ==> assignment (fun), a method added as an execution context
  • this==>assignment(object calling function)
• Start executing function body code