JavaScript this的总结

参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

由于项目组缺少前端，鄙人从后端派到了前端，一周后开始开发，前端0基础，亚历山大。

折腾了一上午，算是理解JavaScript恐怖的this了。
结合参考文档，this的所有使用情况应该主要有如下这么多了吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this</title>
</head>
<body>
<table>
    <tr>
        <th>描述</th>
        <th>代码</th>
        <th>结果</th>
    </tr>
    <tr>
        <td>this指代全局上下文</td>
        <td>this.a</td>
        <td id="1"></td>
    </tr>
    <tr>
        <td>this在函数中取决于调用者</td>
        <td>function user()</td>
        <td id="2"></td>
    </tr>
    <tr>
        <td>bind</td>
        <td>user.bind({name:'bind'})</td>
        <td id="3"></td>
    </tr>
    <tr>
        <td>箭头函数</td>
        <td>var foo = (()=>this);<br>
            var fooBind = foo.bind({});
        </td>
        <td id="4"></td>
    </tr>
    <tr>
        <td>对象的方法1</td>
        <td>var o = {
            prop: 37,
            f: function() {
            return this.prop;
            }
            };
        </td>
        <td id="5"></td>
    </tr>
    <tr>
        <td>对象的方法2</td>
        <td>var o = {prop: 37};
            function independent() {
            return this.prop;
            }
            o.f = independent;
        </td>
        <td id="6"></td>
    </tr>
    <tr>
        <td>对象的方法3</td>
        <td>var o = {
            f : function(){
            return this.prop;
            }
            };
            var p = Object.create(o);
        </td>
        <td id="7"></td>
    </tr>
    <tr>
        <td>构造函数</td>
        <td>function C(){
            this.a = 37;
            }
            var o = new C();
        </td>
        <td id="8"></td>
    </tr>
    <tr>
        <td>DOM事件函数</td>
        <td>bluify(e)
        </td>
        <td id="9">颜色</td>
    </tr>
    <tr>
        <td>内联事件处理</td>
        <td>onclick="alert(this.tagName.toLowerCase())</td>
        <td><button onclick="alert(this.tagName.toLowerCase());">
            Show this
        </button></td>
    </tr>
</table>
<script>
    a = 37;
</script>
<script>
    document.getElementById("1").innerText = this.a;
    var name = "windows";

    function user() {
        return this.name;
    }

    document.getElementById("2").innerText = user();
    console.log(document.getElementById("2").innerText);
    var obj = {name: 'obj'};
    console.log(user.apply({name: 'fuck'}));
    document.getElementById("2").innerText = user.call(obj)

    var bind = user.bind({name: 'bind'});
    document.getElementById("3").innerText = bind();

    var foo = (() => this);
    var fooBind = foo.bind({});
    document.getElementById("4").innerText = fooBind() === this;

    var o1 = {
        prop: 37,
        f: function () {
            return this.prop;
        }
    };
    document.getElementById("5").innerText = o1.f();

    var o2 = {prop: 37};
    function independent() {
        return this.prop;
    }
    o2.f = independent;
    document.getElementById("6").innerText = o2.f()

    var o3 = {
        f:function () {
            return this.prop;
        }
    }
    var oo3 = Object.create(o3);
    oo3.prop = 37;
    document.getElementById("7").innerText = oo3.f();

    function C() {
        this.a = 100;
        return {a:this.a+100};
    }
    var o4 = new C();
    document.getElementById("8").innerText = o4.a;
    console.log(a);

    // 被调用时，将关联的元素变成蓝色
    function bluify(e){
        console.log(this === e.currentTarget); // 总是 true
        // 当 currentTarget 和 target 是同一个对象时为 true
        console.log(this === e.target);
        this.style.backgroundColor = '#A589F3';
    }
    document.getElementById("9").addEventListener('click',bluify,false);
</script>
</body>
</html>

个人理解总结：

this 默认是当前对象，当前对象没有指定，默认是全局的windows对象
函数可以通过call、apply来修改本次执行的this对象
函数可以通过bind来永久修改执行的this对象
var o = new func()构建的对象,func()中的this为o
addEventListener(‘click’,fun(),false),fun()中的this则为事件对象的target
当代码被内联on-event 处理函数调用时，它的this指向监听器所在的DOM元素

JavaScript this的总结

猜你喜欢