This的指向

2018-06-24 02:05:30来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:settimeout、setinterval区别和相互模拟

下一篇:redux 中间件 --- applyMiddleware 源码解析 + 中间件的实战