首页 > 代码库 > 《JavaScript设计模式与开发》笔记 2.this指针

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

  •  1.作为对象方法调用
  •  2.作为普通函数调用
    • 1.作为普通函数进行调用
    • 2.将函数赋值给一个对象
    • 3.callback内部的this指向了window
    • 4.解决callback内部的this问题
  •  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指针