js中this指向问题

瘦猴打羽毛球

已于 2024-01-24 11:28:47 修改

阅读量335

点赞数 12

文章标签： javascript 前端开发语言

于 2024-01-24 11:25:47 首次发布

本文链接：https://blog.csdn.net/qq_38621116/article/details/135817739

版权

1 this 指向windown 函数调用全局函数： this指向window

2 作为对象方法的调用 this指向对象

3 构造函数中的this this指向new创建的对象共同的特点： this的指向无法动态修改

4 函数上下文可以动态修改函数中的this （call， apply, bind）

函数名.call(修改的this,arg1,arg2…………) 适用于函数原本形参 <= 1

函数名.apply(修改的this,[数组或伪数组]) 适用于函数原本形参 >= 2

函数名.bind(修改的this,arg1,arg2…………) 特点：不会立即执行这个函数，

而是返回修改this后的新函数适用于不会立即执行的函数 : 事件处理函数，

定时器函数

5 箭头函数箭头函数不能用作构造器，和 new一起用会抛出错误。

<!-- 
 * @Descripttion: ppt
 * @Author: hu
 * @Date: 2020-09
 * @LastEditors  :
 * @LastEditTime :
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js中this指向问题</title>
</head>
<body>
    <script>
        /*
         函数执行方式
        *  1  this 指向windown  函数调用 全局函数 ： this指向window
        *  2  作为对象方法的调用 this指向对象
        *  3  构造函数中的this  this指向new创建的对象
              共同的特点： this的指向无法动态修改
        *  4  函数上下文 可以动态修改函数中的this （call， apply,  bind）
        *     函数名.call(修改的this,arg1,arg2…………)  适用于函数原本形参 <= 1
        *     函数名.apply(修改的this,[数组或伪数组]) 适用于函数原本形参 >= 2
        *     函数名.bind(修改的this,arg1,arg2…………) 特点：不会立即执行这个函数，而是返回修改this后的新函数   适用于不会立即执行的函数 : 事件处理函数，定时器函数
        *  5  箭头函数 箭头函数不能用作构造器，和 new一起用会抛出错误。
        */

        // 第一种  1 windown  函数调用形式是最常见的形式，也是最好理解的形式。所谓函数形式就是一般声明函数后直接调用即是

        // var func = function () {
        //     alert("你好，程序员");
        // };
        // func();
        // function fn() {
        // this.x=1;
        //    console.log('this=', this)
        // }
        // fn()

        // var age = 38;
        // var obj = {
        //     age: 18,
        //     getAge: function () {

        //         function foo() {
        //             console.log(this.age); // 因为是函数调用模式，所以this指向window全局变量，所以输出为
        //         }
        //         // 只看这个函数是怎么调用，不管函数是在哪声明的！
        //         foo();
        //     }
        // };
        // obj.getAge()

        // 第二种  对象调用
        // var age = 10;
        // var test = {
        //     name: '李四',
        //     age: 23,
        //     foo: function () {
        //         console.log(this);
        //         console.log(this.age);
        //     }
        // }
        // test.foo();
        // var user = "李四";
        // function a() {
        //     var user = "张三";
        //     console.log(this.user); // undefined
        //     console.log(this);　　// Window
        //     function fn() {
        //         console.log('this.user=', this.user)
        //     }
        // }
        // window.a();
        // a()

        // 第三种   构造函数
        // 构造函数中的this
        // function Obj(a) {
        //     this.a = a;
        //     this.func = function () {
        //         console.log(this);
        //         console.log(this.a);
        //     }
        // }
        // var obj = new Obj(2);
        // obj.func();

        // class Person {
        //     constructor() {
        //         this.name = '最帅'
        //         this.age = '18'
        //     }
        //     getName() {
        //         console.log('name=', this.name)
        //     }
        //     getAge() {
        //         console.log('age=', this.age)
        //     }
        // }
        // const dad = new Person()
        // console.log('dad=', dad)
        // dad.getAge()

        // function foo(name, age) {
        //     this.name = name;
        //     this.age = age;
        //     // console.log(this);
        //     this.getName = function () {
        //         console.log(this.name);
        //     }
        // }
        // const obj = new foo('yu', 23)
        // obj.getName()

        // 4 上下文调用

        // 改变this指向的方法  call  bind  apply
        // var a = 111;
        // var obj = {
        //     a: 222,
        //     func: function () {
        //         console.log(this); // {a: 333}
        //         console.log(this.a); // 333
        //     }
        // }
        // var obj1 = {
        //     a: 333,
        // }
        // obj.func.call(obj1);
        // var obj2 = {
        //     a: 444
        // }
        // obj.func.call(obj2);

        // var obj3 = {
        //     a: 555
        // }
        // const bfn = obj.func.bind(obj3);
        // setTimeout(() => {
        //     bfn()
        // }, 10)


        // var name = 'name1';
        // var obj = {
        //     name: 'name2',
        //     sayName: function () {
        //         // 返回一个默认全局的函数
        //         return function () {
        //             console.log(this.name);
        //         };
        //     },
        //     changeName: function () {
        //         // 返回一个默认全局的函数
        //         setTimeout(function () {
        //             this.name = 'name3';
        //             // 然后将该函数绑定给this(当前obj对象)
        //         }.bind(this), 0);
        //     }
        // };

        // // obj.sayName()这个函数，让obj来调用
        // obj.sayName().call(obj);
        // //  让this(也就是全局对象）来调用
        // obj.sayName().apply(this);
        // obj.changeName();
        // setTimeout(function () {
        //     // 输出更改之后，全局name的值
        //     console.log('name=', name);
        //     // 输出更改之后，obj对象中 name的值
        //     console.log(obj.name);
        // }, 0);

        // 箭头函数  

        // 箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

        // var Foo = () => { };
        // var foo = new Foo(); // TypeError: Foo is not a constructor

        // var obj = {
        //     age: 20,
        //     getAge: function () {
        //         var b = this.age; // 1990
        //         var fn = () => 82 - this.age; // this指向obj对象
        //         return fn();
        //     }
        // };
        // obj.getAge(); // 25

    </script>

</body>

</html>