javascript —— this

2019-08-14 10:25:55来源:博客园 阅读 ()

目录

  • 为什么要讨论this

  • this是什么

  • 如何改变this的指向

  • 箭头函数中的this

 

为什么要讨论this

 代码一:

function fun1(){
    var aa = 'I am aa';
    console.log(this.aa)
}
fun1();

会打印出什么呢?是 ' I am aa ' 吗,

结果是:

undefined

原因:

此时 this 指向 window 对象,

this.aa 等同于 window.aa

aa 是局部变量,该值只在函数内部有效,

window.aa 访问的是全局属性,访问不到函数内部的值,因此会打印 undefined

 

 

 代码二:

var fun2 = function(){
    console.log(this.name);
}

var name = 'I am x - global';

var obj2 = {
    name: 'I am x - local',
    ff: fun2
}

fun2();
obj2.ff();

 

结果是:

I am x - global
I am x - local

fun2() 等同于 window.fun2() ,直接调用函数,此时所处 this 指向 window

obj2.ff() 通过 obj2 对象访问其方法,这时 this 指向 obj2

 

 

代码三:

var fun2 = function(){
  console.log(this.name);
}

var name = 'I am x - global';

var obj2 = {
  name: 'I am x - local',
  ff: fun2,
  ff2: function(){
    function fun3(){
      console.log(this.name)
    }
    fun3();
  }
}

fun2();           // global
obj2.ff();        // local
obj2.ff2();       // 

 

结果:

I am x - global
I am x - local
I am x - global

就如下面定义所说的,

this 指向包含它的函数作为方法被调用时所属的对象。

此时 fun3 为函数,并非为绑定到对象上的方法。

 

 

this是什么

定义:this是指包含它的函数作为方法被调用时所属的对象。

个人理解:被调用时所处的上下文。

 

如何改变this的指向

  • call()
  • apply()

 

代码四:

var name = "global name";
var obj1 = {
    name: 'obj1'
}
var obj2 = {
    name: 'obj2'
}
function myName(){
    console.log(this.name);
}

myName()
myName.call(obj1)
myName.call(obj2)

结果:

global name
obj1
obj2

call 改变了 this 的指向

 

callapply 的区别

接受参数方式不同

Object.call(obj, arg1, arg2, arg3)

Object.apply(obj, [arg1, arg2, arg3])

 

箭头函数中的this

 箭头函数中,修复了 this 的指向,

箭头函数函数声明存在于对象方法时,

此时 this 的指向不再是 window undefined

而是这个对象本身。

看一段代码就明白了: 

代码五:

var name = 'I am x - global';

var obj2 = {
    name: 'I am x - local',
    ff2: function(){
        var fun3 = function(){
            console.log(this.name)
        }
        var fun4 = () => {
            console.log(this.name)
        }
        fun3();
        fun4();
    }
}

obj2.ff2();

 

结果:

I am x - global
I am x - local

 

 

箭头函数中的 call()

直接来看一段代码吧

代码六:

var name = 'I am x - global';

var obj2 = {
    name: 'I am x - local',
    ff2: function(){
        var fun3 = function(){
            console.log(this.name)
        }
        var fun4 = () => {
            console.log(this.name)
        }
        fun3();        // global
        fun4();        // local
        fun3.call({name:'new name1'})    // 看这里
        fun4.call({name:'new name2'})    // 看这里
    }
}

obj2.ff2();

 

结果:

I am x - global
I am x - local
new name1
I am x - local

 

用 call() 或 apply() 调用箭头函数时,

将无法对 this 进行绑定,

传入的第一个参数将会被忽略。

 


原文链接:https://www.cnblogs.com/mu159/p/11290073.html
如有疑问请与原作者联系

标签:方法定义Spanfunction代码属性

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js截取字符串相关的知识点

下一篇:JavaScript AJAX PHP