Alugg's Blog
0%

Frontend-Day9——This

发表于 分类于
本文字数： 4.4k 阅读时长 ≈ 4 分钟

This的指向

绑定

默认绑定

独立的函数调用我们理解成函数没有被绑定到某个对象上进行调用

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

  <script>
    function foo() {
      console.log(this)
    }


​    //1.直接调用
​    foo()   //window

​    //2.函数定义在对象中,但是独立调用
​    var obj = {
​      name:"why",
​      bar:function() {
​        console.log(this)
​      }
​    }
​    var xx = obj.bar
​    xx() //window
​    
​    //3.高阶函数
​    function test(fn) {
​      fn()
​    }
​    test(obj.bar)
  </script>

隐式绑定

  • 在调用的对象内部有一个对函数的引用(比如一个属性)
1
2
3
4
5
6
7
8
9
// 隐式绑定

function foo(){
 console.log("xx")
}
var obj = {
 bar:foo
}
obj.bar()

new绑定

1
2
3
4
5
6
7
8
// new绑定

function foo() {
 console.log(this)
 this.name ="oooo"
}

new foo()

显式绑定

如果不希望在对象内部包含这个函数的引用,但同时有希望在这个对象上强制调用

则使用apply或call方法

apply第一个参数绑定this,第二个参数:传入额外的实参,以数组的形式 —

call第一个参数绑定this,第二个参数:后续参数是以多参数的形式传递作为实参

1
2
3
4
5
6
7
8
 
var obj = {
 name: "why"
}
function foo() {
 console.log("foo",this)
}
foo.call(obj)

bind绑定

1
2
3
4
5
6
7
8
9
10
11
function foo() {

 console.log(this)

}

var obj = {name:"why"}

var bar = foo.bind(obj)

bar() //this  -> obj

内置函数的调用绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
setTimeout(function() {
 console.log("setTimeout",this) //window
},1000)


box.onclick = function(){
 console.log(this) //box
}


var name = ["abc", "sss"]
var obj = {name:"why"}
names.forEach(function (item) {
 console.log(this)  //obj
}, obj)

规则优先级

显式绑定高于隐式绑定

new绑定优先级高于隐式绑定

new不能和apply,call同时使用

new >bing/apply/call>隐式>默认

箭头函数

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
var names = ["abc", "bca", "nba"]
names.forEach((item, index, arr) => {
 console.log(item,index,arr)
})

names.forEach(item => {
 console.log(item)
})


var nums = [20, 30, 11, 15, 111]
//1.只有一个参数可以去掉()
var newNums = nums.filter(item => {
 return item%2===0
})
console.log(newNums)

//2.只有一行代码可以去掉{},并且这行代码返回值会作为函数返回值
var newNUms = nums.filter(item => console.log('haha'))

//3.如果返回值是一个对象,返回值需要加上()
var arrFn = () => ({ name:"alugg"})
console.log(arrFn())


var newNums = nums.filter(item => item%2===0).map(item => item*item).reduce((prevValue,item)=> prevValue+item) 
console.log(newNums)

四道面试题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var name = "window"
var person = {
  name: "person",
  sayName: function () {
    console.log(this.name)
  }
};

function sayName() {
  var ss =person.sayName;

  ss() //window
  person.sayName(); //person
  (person.sayName)(); //person
  (b = person.sayName)(); //window
}

sayName()
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
var person1 = {
  name: 'person1',
  foo1: function(){
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function() {
    return function() {
      console.log(this.name)
    }
  },
  foo4: function() {
    return () => {
      console.log(this.name)
    }
  }
}

var person2 = {name:'person2'}

perons1.foo1();//person1
person1.foo1.call(person2);//person2

person1.foo2();//window
person1.foo2.call(person2);//window

person1.foo3()();//window 直接
person1.foo3.call(person2)();//window直接
person1.foo3().call(person2);//person2

person1.foo4()();//person1
person1.foo4.call(person2)();//person2
person1.foo4().call(person2);//person1
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
function Person(name){
  this.name = name
  this.foo1 = function() {
    console.log(this.name)
  }
  this.foo2 = () => console.log(this.name)
  this.foo3 = function () {
    return function() {
      console.log(this.name)
    }
  }
  this.foo4 = function() {
    return () => {
      console.log(this.name)
    }
  }
}

var person1 = new Person('person1')
var person2 = new Person('person2')

person1.foo1() //person1 隐
person1.foo1.call(person2) //person2 显

person1.foo2() //person1
person1.foo2.call(person2) //person1

person1.foo3()() //window
person1.foo3.call(person2)()//window 默认帮等
person1.foo3().call(person2) //person2

person1.foo4()() //person1
person1.foo4.call(person2)() //person2
person1.foo4().call(person2) //person1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Person(name) {
  this.name = name
  this.obj = {
    name: 'obj',
    foo1: function () {
      return function () {
        console.log(this.name)
      }
    },
    foo2 :function () {
      return () => {
        console.log(this.name)
      }
    }
  }
}

person1.obj.foo1()() //window 默认
person1.obj.foo1.call(person2)() //window
person1.obj.foo1().call(person2) //person2

person1.obj.foo2()()  // obj
person1.obj.foo2.call(person2)() //person2
person1.obj.foo2().call(person2) //obj
-------------本文结束感谢您的阅读-------------