This的指向 - foreverwaiting

This的指向总的来说分为四点：

1.作为对象的方法调用。

//1.作为对象的方法调用
        var obj={
            a:1,
            getA:function(){
                alert(this===obj);//输出：ture
                alert(this.a);//输出：1
            }
        };//即当函数作为对象的方法被调用时，this指向该对象
        obj.getA();

2.作为普通函数调用。

//2.作为普通函数调用
        window.name1="globalName1";
        var getName1=function(){
            return this.name1;
        };
        console.log(getName1());//输出：globalName

或者

//或者这样
        window.name2 = 'globalName2';
        var myObject = {
            name: 'sven',
            getName2: function(){
                return this.name2;
            }
        };//当函数不作为对象的调用时，也就是我们常说的普通函数方式，此时的this总是指全局对象，在浏览器的JavaScript里，这个全局对象时window对象。
        var getName2= myObject.getName2;
        console.log( getName2() );//输出globalName

3.构造器调用。

//3.构造器调用
        var MyClass = function(){
            this.name = 'sven';
        };
        var obj = new MyClass();
        alert ( obj.name ); //输出：sven
        //当使用new调用函数，该函数会返回一个对象，构造器里的this指向返回的对象，如上。

但用new构造器时要注意，要是构造器显式的返回一个object类型的对象，那么此次最终会返回那个显式的对象

 var MyClass = function(){
            this.name = 'sven';
            return { //显式的返回一个对象
                name: 'anne'
            }
        };
        var obj = new MyClass();
        alert ( obj.name ); //输出：anne
        //但用new构造器时要注意，要是构造器显式的返回一个object类型的对象，那么此次最终会返回那个显式的对象，如上。

不过当构造器不显式的返回任何数据，或者返回的是非object类型，则不会造成上述问题

 var MyClass = function(){
            this.name = 'sven';
            return 'anne'; //返回字符串string类型
        };
        var obj = new MyClass();
        alert ( obj.name ); // 输出：sven
        //不过当构造器不显式的返回任何数据，或者返回的是非object类型，则不会造成上述问题，如上。

4.Function.prototype.call或Function.prototype.apply调用

var obj1 = {
            name: 'sven',
            getName: function(){
                return this.name;
            }
        };
        var obj2 = {
            name: 'anne'
        };
        console.log( obj1.getName() ); //输出: sven
        console.log( obj1.getName.call( obj2 ) ); //输出：anne
        //跟普通函数相比，Function.prototype.call或Function.prototype.apply能动态改变传入函数的this，如上。

除此之外：this指向在运行中决定，不在代码中决定
　　　　　this在全局指向window对象
　　　　　this放在函数内，在运行时，函数是谁调用的，this就指向谁
　　　　　函数的两种调用方式：1.点式调用时，点前面是谁就调用谁指向谁如xx.f()。2.window.f()等价于f(),this指向window

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="div1">我是一个div</div>
</body>
    <script>
        window.id = 'window';
        document.getElementById( 'div1' ).onclick = function(){
            alert ( this.id ); //输出：div1
            var callback = function(){
                alert ( this.id ); //输出：window。但其实有时我们希望他指向该div节点
            };//其实当在ECMAScript5的strict模式下，上面这种情况下的this已经被规定为不会指向全局对象，而是undefined。
            callback();
        };
        //鉴于此，我们可以可以用一个变量保存div节点的引用，如下。
        window.id = 'window';
        document.getElementById( 'div1' ).onclick = function(){
            var that = this; //保存div的引用
            var callback = function(){
                alert ( that.id ); //输出：div1
            };
            callback();
        };
        //其实当在ECMAScript5的strict模式下，上面这种情况下的this已经被规定为不会指向全局对象，而是undefined，如下。
        function func(){
            "use strict";
            alert ( this ); //输出：undefined
        }
        func();
    </script>
</html>

posted on 2018-05-15 21:30 foreverwaiting 阅读(219) 评论(0) 编辑收藏举报