《JavaScript设计模式与开发》笔记 2.this指针

Posted SmarTom

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《JavaScript设计模式与开发》笔记 2.this指针相关的知识,希望对你有一定的参考价值。

  •  1.作为对象方法调用
  •  2.作为普通函数调用
  •  3.构造器调用
    • 1.普通构造器
    • 2.如果构造器显示地返回了一个object类型对象
  •  4.Function.prototype.call 或 Fucktion.prototype.apply调用
    • 1.跟普通的函数调用相比,可以动态的传入函数的this

1.作为对象方法调用

var obj = {
    a:1,
    getA:function(){
        console.log(this===obj);
        console.log(this.a);
    }
}
obj.getA();

 

2.作为普通函数调用

//作为普通函数进行调用
var name = ‘SmarTom‘;
var getName = function(){
    return this.name;
}
console.log(getName());//返回undefined

/*-------------------------------------------------------*/

//将函数赋值
var obj ={
    name : ‘SmarTom‘,
    getName : function(){
        return this.name;
    }
}

/*将函数赋值给一个对象 相当于 
var getname=function(){
    asdfasdf
}
*/
var getname = obj.getName;
console.log(getname()); //返回undefined


/*===============请忽视分割线=============================*/
var obj ={
    name : ‘SmarTom‘,
    getName : function(){
        return this.name;
    }
}
console.log(obj.getName()); //返回SmarTom
/*===============我知道你不会当做不知道====================*/

 

有时候我们会遇到一个困扰,比如在div节点事件函数内部,有一个局部的callback方法,callback方法被作为普通函数来调用时,callback内部的this指向了window,但我们往往认为他是指向该div的节点,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">我是一个div</div>
    <script>
        document.getElementById(‘div1‘).onclick = function(){
            alert(this.id); //作为对象调用div1
            var callback =function(){
                alert(this.id);
            }
            callback(); //调用的是全局的this 弹出  undefined
        }
    </script>
</body>
</html>

 

解决方法:

1.将this赋值给临时变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">我是一个div</div>
    <script>
        document.getElementById(‘div1‘).onclick = function(){
            var that = this;
            alert(that.id); //作为对象调用div1
            var callback =function(){
                alert(that.id);
            }
            callback(); //调用的是全局的this 弹出  undefined
        }
    </script>
</body>
</html>

 

2.使用严格模式 "use strict" 注意使用的时候会忽略this=undefined 的情况

3.构造器调用

javascript中没有类,但是可以从构造器中创建对象,同时也提供了new运算符,使得构造器更像一个类。其实就是用new构造一个对象,看起来更像是类

通常情况下,构造器里的this就指向返回的这个对象

var myClass = function(){
    this.name = ‘SmarTom‘;
}
var obj = new myClass();
console.log(obj.name);  //返回SmarTom

 

但使用new调用构造器时,还要注意一个问题,如果构造器显示地返回了一个object类型对象,那么此次运算结果最终会返回这个对象,可不是我们之前期待的this;

var myClass = function(){
    this.name = ‘SmarTom‘;
    return {
        name : "Bob Dylan"
    }
}
var obj = new myClass();
console.log(obj.name);  //返回Bob Dylan

 

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

跟普通的函数调用相比,可以动态的传入函数的this

var obj1 = {
    name : "SmarTom",
    getName : function(){
        return this.name;
    }
};
var obj2 = {
    name :"Bob Dylan"
};
console.log(obj1.getName());        //输出‘SmarTom‘
console.log(obj1.getName.call(obj2));   //输出BobDylan

 

以上是关于《JavaScript设计模式与开发》笔记 2.this指针的主要内容,如果未能解决你的问题,请参考以下文章

《JavaScript设计模式与开发》笔记 4.闭包

JavaScript设计模式与开发实践---读书笔记

JavaScript设计模式与开发实践---读书笔记 迭代器模式

《JavaScript设计模式与开发》笔记 5.关于正确写一个闭包

《JavaScript设计模式与开发》笔记 6.高阶函数

javascript设计模式与开发实践 阅读笔记