this指向问题

104828720

JS中,this究竟指向什么

永远指向对象

只会在两种作用域中才有this

  1. 全局
var title = "xxxy";

if(true){
    var title = "500";
    alert(this.title)   // 全局this
}

var obj = {
    title: '开始',
    age: this.title,    // 全局this
    say: function(){
        alert(this.title)    // 函数this
    }
}

alert(obj.age);

obj.say();
  1. 函数域(function定义的函数,非箭头函数)
var title = "123";

function abc(){
    alert(this.title);  // 123  函数this,此this是动态的
}

abc()  // this代表window
 
注意:js中没有对象this,如果对象中,非函数类型属性使用this时,指向的都是外层this
var title = "xxx"
var obj = {
    title: '开始',
    age: this.title    // 全局this 所以是xxx
}

function test(){
    var obj = {
        title: '开始',
        age: this.title    // 如果是普通函数调用,此时的this还是指向最外层window
                           // 如果是构造函数调用,此时的this是指向test对象
    }
}

test()
new test()

JS中,this在哪些位置出现

  • 全局
在浏览器中,全局的this指向windows对象

在NodeJS中,全局的this指向module.exports对象
  • 函数
1、普通函数
function fn(){
    console.log(this);
}

2、对象的方法
var obj = {
    name: "wwbb",
    say: function(){
        console.log(this.name)
    }
}

3、回调函数
var oBtn = document.getElementById("send");
oBtn.addEventListener('click', function(){
    console.log(this);    // 这个this指代oBtn这个按钮
})

4、箭头函数
const getName = () => {
    this.name = "xxx"
}

总结:123是运行时指定(动态this),4是编码时指定(静态this)
只要是非箭头函数,this都是动态的

var obj = {
    name: "wwbb",
    say: function(){
        console.log(this.name)
    }
}
obj.say()  //this是 obj

var go = obj.say;
go()   //this是window

普通函数与箭头函数的区别

  • 写法

    普通函数:1、函数声明 2、函数表达式 都必须使用function关键字
    
    箭头函数:是一种匿名函数,只有函数表达式 没有function关键字
  • this指向

    普通函数:this是动态
    
    箭头函数:this是静态 对象属性是箭头函数,里面this指向对象所在的this
阅读 445

学习笔记
温故而知新

编程其实很枯燥,所以一定要有追求。

1.4k 声望
220 粉丝
0 条评论

编程其实很枯燥,所以一定要有追求。

1.4k 声望
220 粉丝
文章目录
宣传栏