改变this指向的方法

我带你们飞

6435人浏览 · 2022-08-22 19:40:18

我带你们飞 · 2022-08-22 19:40:18 发布

(1)、call方法

1、call()方法可以进行普通函数的调用

2、call()方法可以改变this的指向，如果没有参数，this指向window

3、call()方法可以改变this的指向，如果有一个参数，this指向该参数

4、call()方法可以改变this的指向，如果有多个参数，this指向第一个参数，剩下的是个参数列表（构造函数继承的案例）

(2)、apply方法

1、 apply()方法可以进行普通函数的调用

2、apply()方法可以改变this的指向，如果没有参数，this指向window

3、apply()方法可以改变this的指向，如果有一个参数，this指向该参数

4、apply()方法可以改变this的指向，如果有多个参数，第一个参数是null或者window，第二个参数是数组

(3)、bind方法

推荐使用第二种形式，第三种用的相对较少，但也是必须掌握的内容。

bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript 5 规范中内置的call属性）。当目标函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。绑定函数被调用时，bind() 也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

bind()不能进行函数的调用
可以改变this指向

<!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>Document</title>
</head>

<body>

</body>

<script>

    // 1、
    var fn1 = function () {
        console.log("我是函数表达式");
    }
    // fn1();
    fn1.call();

    var name = "小红";
    var obj1 = {
        name: "小花",
        getName: function () {
            console.log(1111);
            console.log(this.name);
        }.bind()
    }
    obj1.getName();
    /*   obj1.getName();//小花
      obj1.getName.call();//小红 */
    var obj2 = {
        name: "小刚",
        getName: function () {
            console.log(this.name);
        }
    }
    obj2.getName();
    obj2.getName.call();
    obj2.getName.call(obj1); //小花


    // 2、
    fn1.apply()
    obj1.getName.apply(); //小红
    obj2.getName.apply(obj1); //小花
    console.log(Math.max(20, 30, 50)); //50
    console.log(Math.max.call(window, 20, 30, 50)); //50
    console.log(Math.max.apply(Window, [20, 30, 50])); //50
    console.log(Math.max.apply(null, [20, 30, 50])); //50



    // 3、
    // fn1.bind();
    var fn2 = function () {
        console.log(22222222222222);
        console.log(this.name); //小红 小花
        console.log("bind调用");
    }.bind()
    // .bind(obj1)

    fn2()
    // fn2.bind();

    var name = "喜羊羊";
    var object = {
        name: "懒洋洋",
        getName: function () {
            var name = "美羊羊";
            var that = this;
            console.log(this.name); //懒羊羊
            console.log(name); //喜羊羊 美羊羊
            function func1() {
                console.log(this.name); //喜羊羊
                console.log(name); //美羊羊 undefined
                // var name = "村长羊";
            }
            func1();
            var name = "暖羊羊"
            var name = function () {
                console.log(name); //f name()
                console.log(this.name);
            }
            name();
            var func2 = function () {
                console.log("999999999999999999999999999999");
                console.log(name);
                console.log(this.name); //喜羊羊 懒羊羊
                // }.bind(this)
                return name;
                // console.log(this.name); 
            }.bind(that)

            console.log(func2());
            func2.call(this);
        }
    }
    // }
    object.getName();
</script>

</html>