this指针

最新推荐文章于 2024-04-08 08:04:23 发布

酷酷的景凉

最新推荐文章于 2024-04-08 08:04:23 发布

阅读量117

点赞数

分类专栏：记录文章标签： javascript

本文链接：https://blog.csdn.net/qq_40308568/article/details/104254730

版权

记录专栏收录该内容

9 篇文章 0 订阅

订阅专栏

this指针

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>this指针</title>
</head>
<body>
    <script>
        window.onload = function(){
            // 默认：在严格模式下绑定到undefined，否则绑定到全局对象。
            function demo(){
                console.log(this);// Window
            }
            demo();
            function demo2(){
                "use strict"
                console.log(this);// undefined
            }
            demo2();
            var o = {};
            o.name = "xxx";
            o.print = function() {
                console.log(this.name); // xxx 指向上下文对象o
            }
            o.print();
            
            function Demo3(name){
                this.name = name; 
                console.log(this.name);// yyy 由new调用 指向新创建的对象 
            }
            
            new Demo3("yyy");


            num = 1;
            var obj = {
                num: 2,
                print: function() {
                    this.num = 3;
                    console.log(this.num); // 3 指向上下文对象obj
                    (function(){
                        console.log(this.num); // 1 没有调用者 指向全局
                    })();
                }
            }
            obj.print(); // 由上下文调用：绑定到上下文对象

            var obj2 = {
                num: 5
            };
            Demo4.call(obj2,"ddd");
            function Demo4(name) {
                this.name = name;
                console.log(this); // {num: 5, name: "ddd"} 由call、apply调用：绑定到指定对象
            }


            // 总结：
            // 1.默认绑定：严格模式下绑定到undefined，否则绑定到全局对象
            // 2.由new调用：绑定到新创建的对象
            // 3.由call、apply调用：绑定到指定对象
            // 4.由上下文对象调用：绑定到上下文对象

        }    
        // 一定要注意，有些调用可能在无意中使用默认绑定规则
        // 如果想更安全的忽略this绑定，可以使用一个空对象 比如 ø = Object.create(null); 以保护全局对象
        // ES6中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定this
        // 具体来说，箭头函数会继承外层函数调用的this绑定(无论this绑定到什么)
        // 如果箭头函数外层没有函数，绑定到全局，如果箭头函数外层有函数 绑定到外层函数调用的this
        // 这其实和ES6之前代码中的self = this;机制一样
        n = 2;
        var obj2 = {
            n: 1,
            print: function(){
                console.log(this.n); // 绑定到上下文对象obj2
            },
            print2: ()=>{
                console.log(this.n); // 绑定到外层函数obj2调用的this绑定 在这里是window
            }

        }
        obj2.print(); // 1
        obj2.print2(); // 2
        console.log(this.obj2); // {n: 1, print: ƒ, print2: ƒ}


        var o1 = {
            m:1,
            print:function(){
                (()=>{
                    console.log(this.m); // 绑定到外层函数print调用的this绑定 在这里是o1
                })()
            }
        }
        o1.print();
    </script>
</body>
</html>

酷酷的景凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
this指针

this指针<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫