js中call apply bind 改变this指向的使用

最新推荐文章于 2023-11-21 18:04:44 发布
SpringYoungYu
最新推荐文章于 2023-11-21 18:04:44 发布
阅读量45
点赞数
本文链接：https://blog.csdn.net/qq_44917015/article/details/118439456
版权
<!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>
    <div id="div">1</div>
    <div id="div">1</div>
    <div id="div">1</div>
    <div id="div">1</div>
    <div id="div">1</div>
    <div id="div">1</div>
    <div id="div">1</div>
    <div id="div">1</div>
    <div id="div">1</div>
    <div id="div">1</div>
    <div id="div">1</div>
    <script>
        // function fn1(a, b) {
        //     console.log(a + b)
        // }

        /* 函数.call() 或者 函数名.apply() 都是执行函数 */
        // fn1(1,200);
        // call 带入参数 从第二位开始给予参数
        // fn1.call(null,100,200)
        // apply 第二位是一个数组
        // fn1.apply(null, [199, 199])
        // var arr = [1, 2, 3, 4];
        // var max = Math.max.apply(null, arr);
        // // console.log(max)
        // //
        // let max1 = Math.max(1, 2, 3, 4, 5, 5,)
        // let max2 = Math.max(...arr)
        // console.log(max2)

        // let obj = {
        //     data(){
        //         console.log(this)
        //     },
        //     methods: {
        //         name:"methods",
        //         change1(){
        //             console.log(this.name,this)
        //             this.name = '234'
        //             console.log(this.name,this)
        //         }
        //     }
        // }
        // obj.methods.change1();
        // obj.data();
        // div.onclick = obj.data;

        // let obj1 = {}
        // function abc(_a,_b){
        //     console.log(this)
        //     this.a = _a
        //     this.b = _b
        //     this.c = this.a + this.b;
        // }

        // this 指向window
        // abc(199,199);
        // console.log(a,b,c)
        // abc.call(this,1,1)
        // console.log(a,b,c)
        /* call 改变函数内部this的指向
        将abc函数中的this指向call的第一个参数obj1 */
        // abc.call(obj1,123,123)

        /* apply 改变函数内部this指向 
        将abc函数中的this指向apply的第一个参数obj1 */
        // abc.apply(obj1,[101,101]);
        // console.log(obj1)

        // let obj = {
        //     a:1,
        //     b:2,
        //     c:function(_a,_b){
        //         console.log(this)
        //         this.a+=_a;
        //         this.b+=_b
        //         return this.a + this.b;
        //     }
        // }
        // let sum = obj.c(3,5)//11
        // console.log(sum)

        // let obj1 = {
        //     a:100,
        //     b:101
        // }
        // var sum = obj.c.call(obj1,100,101)
        // var sum1 = obj.c.apply(obj1,[100,101])

        // console.log(sum1)

        // class Arrays {
        //     constructor(){

        //     }
        //     add(start,end){
        //         return start+end
        //     }
        // }
        // let num = new Arrays();
        // // console.log(num)
        // console.log(num.add(100,1000))


        // let arr1 = [1,2,3,4,5]
        // console.log(arr1,arr1.slice(),arr1 == arr1.slice())
        // let divs = document.getElementsByTagName('div');
        // 将类数组对象 转成 数组 ，借用数组的slice方法 使用call 改变内部this指向
        // console.log( [].slice.call(divs) )

        let obj = {
            a: 1,
            abc: function () {
                let div = document.querySelector('div');
                // 事件函数 的this指向div，需要call重新定义this
                // 这样这个事件就没有用了 因为call指向之后会直接执行这个函数
                // 此函数执行执行之后 会返回一个函数 这个就是绑定在事件上的函数 函数this为绑定的元素
                // 此事call 改绑定this也无用 需要重新在函数中定义this指向，或者使用箭头函数来获取外部的this
                // 但是箭头函数获取外部的this有些不太好的地方 我自己感觉 不太准确 容易误解
                // div.addEventListener('click', this.clickHandler.call(this))

                // 使用bind来绑定函数指向 但是不会执行函数
                div.addEventListener('click', this.clickHandler.bind(this))
            },
            clickHandler(e) {
                console.log(this)
                // console.log( this.clickHandler )
                this.a++
                console.log(this.a);
                console.log(e.currentTarget)

                // e.currentTarget.removeEventListener('click')
                // let that = this

                // return function(){
                //     console.log(that)
                // }

                // return () => {
                //     this.a++
                //     console.log(this)
                // }
            }
        }
        // obj 来执行 abc方法 ，abc方法中的this指向 obj, 
        obj.abc()

        function abc(_a,_b){
            this.a = _a;
            this.b = _b;
            // console.log( this.a + this.b );
            // console.log(this)
        }

        // abc(100,109)

        // 在非严格模式下 this指向null或者undefined,都是指向window
        abc.call(null,3,9)
        abc.call(undefined,3,9)
        abc.apply(null,[12,13])

        //
        let obj2 = {}; 
        // 将obj2 带入函数中 ，this指向也是obj2，但是不执行这个函数
        // 会返回一个新的函数 新的函数的this指向就是obj2 ，原来函数中this指向不变
        let fn123 = abc.bind(obj2);
        // console.log(obj2);
        fn123(10,10)
    </script>
</body>

</html>