js 函数内this的指向

戴竹蜻蜓穿过森林_

于 2021-09-13 12:07:15 发布

阅读量160

点赞数

分类专栏：前端学习笔记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/july_29/article/details/120262606

版权

前端学习笔记专栏收录该内容

34 篇文章

订阅专栏

本文详细讲解了JavaScript中this的五种不同指向情况：函数调用、方法调用、构造函数调用、事件绑定及箭头函数。同时，通过示例展示了call方法如何改变函数内部this的指向，并利用call实现函数继承。理解这些概念对于JavaScript编程至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.以函数的形式调用时，this的指向为window，比如sum(),fun()。相当于window.fun()
2.以方法的形式调用时，this指向调用方法的那个对象。
3.以构造函数的形式调用时，this指向实例对象。
4.以事件绑定函数的形式调用时，this指向绑定事件的对象。
5使用call和apply调用时，this指向指定的那个对象。
6.ES6中箭头函数会继承外层函数调用的this绑定。

call（）
call()可以调用一个函数，比如fn.call(),在括号内加参数可以改变this的指向。

   const obj = {
        name:'zyx',
        age:'21'
    }
    function fn1(){
        console.log(this)    //window
        console.log(this.name)    //undefind
    }
    fn1.call()

call改变this指向

  const obj = {
        name:'zyx',
        age:'21'
    }
    function fn1(){
        console.log(this)   //{name: "zyx", age: "21"}

        console.log(this.name)  //zyx
    }
    fn1.call(obj)

通过call实现继承

function people(name,age){
    this.name = name;
    this.age = age;
}
function student(name,age){
//通过this把student函数的参数传给people
    people.call(this,name,age)
}
const student1 = new student('zyx',21)
console.log(JSON.stringify(student1))```