this综合篇

Posted bbqq1314

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了this综合篇相关的知识,希望对你有一定的参考价值。

var name = ‘window‘
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‘ }

person1.foo1() 
person1.foo1.call(person2) 

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

person1.foo3()() 
person1.foo3.call(person2)() 
person1.foo3().call(person2) 

person1.foo4()() 
person1.foo4.call(person2)() 
person1.foo4().call(person2)




答案:
// ‘person1‘
// ‘person2‘


// ‘window‘
// ‘window‘

// ‘window‘
// ‘window‘
// ‘person2‘



// ‘person1‘
// ‘person2‘
 // ‘person1‘

var name = ‘window‘
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.foo1.call(person2) 

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

person1.foo3()() 
person1.foo3.call(person2)() 
person1.foo3().call(person2) 

person1.foo4()() 
person1.foo4.call(person2)() 
person1.foo4().call(person2) 


答案:
// ‘person1‘
// ‘person2‘

// ‘person1‘
// ‘person1‘

// ‘window‘
// ‘window‘
// ‘person2‘


// ‘person1‘
// ‘person2‘
// ‘person1‘
var name = ‘window‘
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)
      }
    }
  }
}
var person1 = new Person(‘person1‘)
var person2 = new Person(‘person2‘)

person1.obj.foo1()()
person1.obj.foo1.call(person2)()
person1.obj.foo1().call(person2)

person1.obj.foo2()()
person1.obj.foo2.call(person2)()
person1.obj.foo2().call(person2)


答案是:


window
window
person2


obj
person2
obj

person1.obj.foo1()()返回的是一个普通的匿名函数,调用它的是window,所以打印出window。
person1.obj.foo1.call(person2)()中是使用.call(person2)改变第一层函数中的this,匿名函数和它没关系,依旧是window调用的,所以打印出window。
person1.obj.foo1().call(person2)是通过.call(person2)改变匿名函数内的this,所以绑定有效,因此打印出person2。
person1.obj.foo2()()第一层为普通函数,第二层为匿名箭头函数。首先让我们明确匿名箭头函数内的this是由第一层普通函数决定的,所以我们只要知道第一层函数内的this是谁就可以了。而这里,第一层函数最后是由谁调用的呢 ????是由obj这个对象,所以打印出obj。
person1.obj.foo2.call(person2)()中使用.call(person2)改变了第一层函数中的this指向,所以第二层的箭头函数会打印出person2。
person1.obj.foo2().call(person2)中使用.call(person2)想要改变内层箭头函数的this指向,但是失败了,所以还是为外层作用域里的this,打印出obj。





function foo() {
  console.log( this.a );
}
var a = 2;
(function(){
  "use strict";
  foo();
})();


答案并不是undefined,也不会报错,而是打印出了2。
其实这里是有一个迷惑点的,那就是"use strict"。
我们知道,使用了"use strict"开启严格模式会使得"use strict"以下代码的this为undefined,也就是这里的立即执行函数中的this是undefined。
但是调用foo()函数的依然是window,所以foo()中的this依旧是window,所以会打印出2。
如果你是使用this.foo()调用的话,就会报错了,因为现在立即执行函数中的this是undefined。
或者将"use strict"放到foo()函数里面,也会报错。


这几个题前面this详解的时候有详细描述,不懂的可以翻阅之前this的内容。也可留言。

欢迎加群一起进步

 

技术图片

 

以上是关于this综合篇的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0 代码功能片段

在 webview_flutter 中启用捏合和缩放,在哪里添加代码片段 [this.webView.getSettings().setBuiltInZoomControls(true);]

ngx-translate实现国际化:this.translate.use()this.translate.get()this.translate.instant()onLangChange(代码片段

Discuz代码片段

在片段java类中使用“this”和getLastSignedInAccount时出现错误[重复]

实用代码片段将json数据绑定到html元素 (转)