4 arrow function (special case)

The arrow function does not have this inside, but is referred to by this in the parent scope

var a = 0
function foo() {
  console.log(this) // obj
  var test = () = > {
    console.log(this) // obj
  }
  test()
}
var obj = {
  a: 1.foo: foo
}
obj.foo()
Copy the code

Does the rule above apply to the arrow function this pointing?

var a = 0
function foo() {
  var test = () = > {
    console.log(this)}return test
}
var obj1 = {
  a: 1.foo: foo
}
var obj2 = {
  a: 2.foo: foo
}
obj1.foo()() // a separate call to obj1
// Indicates that the default pointing to arrow function does not take effect

var bar = foo().call(obj2) // It points to window
// indicates that the display binding is invalid for arrow functions
Copy the code
var obj1 = {
  a: 1.foo: () = > {
    console.log(this)
  }
}
obj1.foo() / / points to the window
// indicates that implicit binding is not valid for arrow functions
Copy the code
var foo = () = > {
  console.log(this)}new foo() / / an error
// the arrow function cannot be used as a constructor
Copy the code

So none of the rules apply to arrow functions, where this depends on the parent environment of this (arrow functions don’t have this)

5 sample

var name = 'window'
var obj1 = {
  name: '1'.fn1: function() {
    console.log(this.name)
  },
  fn2: () = > {
    console.log(this.name)
  },
  fn3: function() {
    return function() {
      console.log(this.name)
    }
  },
  fn4: function() {
    return () = > console.log(this.name)
  }
}
var obj2 = {
  name: '2'} obj1.fn1() obj1.fn1.call(obj2) obj1.fn2() obj1.fn2.call(obj2) obj1.fn3()() obj1.fn3().call(obj2) obj1.fn3.call(obj2)()  obj1.fn4()() obj1.fn4().call(obj2) obj1.fn4.call(obj2)()Copy the code

So it’s 1, 2, window window window 2, window 1, 1, 2

Resolution:

obj1.fn1() // Object call returns 1
obj1.fn1.call(obj2) // Display calls obj2 print 2

obj1.fn2() // The arrow function points to the parent scope window
obj1.fn2.call(obj2) // Arrow functions do not apply to the call binding, or window

obj1.fn3()() // Call window independently
obj1.fn3().call(obj2) // point to obj2 2
obj1.fn3.call(obj2)() // Separate calls to the window

obj1.fn4()() // The arrow function points to the parent scope fn4, whose scope is obj1, so print 1
obj1.fn4().call(obj2) // The same arrow function does not apply to the call binding
obj1.fn4.call(obj2)() 
// The arrow function's parent scope becomes obj2, so print 2.
// Change the direction of an arrow function only by changing its parent scope
Copy the code
function Foo () {
  getName = function () {console.log (1)}
  return this
}
Foo.getName = function () {console.log(2)}

Foo.prototype.getName = function () {console.log(3)} // Attributes on the instance object

var getName = function() {console.log (4)} // Function expression
function getName() {console.log 5} // Function declaration

Foo.getName() / / 2
getName() / / 4
Foo().getName() / / 1
getName() / / 1

new Foo.getName() / / 2
new Foo().getName() / / 3
new new Foo().getName() / / 3
Copy the code

Answer: 2, 4, 1, 2, 3, 3

Resolution:

Foo.getName() // The static property of the constructor prints 2 directly
getName() // 4 declarative functions will be declared in advance so are overridden by printing 4
Foo().getName() // Foo is a standalone call, and this refers to window
// So the window's getName method
// The getName method has been reassigned to Foo in the function, so print 1
getName() // It prints 1

new Foo.getName() / / 2
new Foo().getName() // 3 Attributes on the instance
new new Foo().getName() / / 3
Copy the code