正文 

当前位置： 首页 > java > java语法

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

SmarTom      2022-02-12     274

关键词：

  •  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设计模式与开发》笔记6.高阶函数

 1.函数作为参数传递1.回调函数2.Array.prototype.sort 2.函数作为返回值输出1.判断数据的类型 3.高级函数的实现AOP 4.高阶函数的其他应用1.currying函数柯里化2.uncurring3.函数节流4.分时函数5.惰性加载函数1.函数作为参数传... 查看详情

《javascript设计模式与开发》笔记3.call和apply

 1.改变this指向 2.Function.prototype.bind 3.借用其他对象方法1.借用实现继承2.实现恶心的Array.prototype.push.callArray.prototype.join.callArray.prototype.slice.callObject.prototype.toString.call1.改变this指向varobj 查看详情

javascript设计模式与开发实践阅读笔记（10）——组合模式

组合模式：一些子对象组成一个父对象，子对象本身也可能是由一些孙对象组成。 有点类似树形结构的意思，这里举一个包含命令模式的例子1varlist=function(){//创建接口对象的函数2return{3arr:[],//执行列表用来存储需要执行的... 查看详情

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

 1.作为对象方法调用 2.作为普通函数调用1.作为普通函数进行调用2.将函数赋值给一个对象3.callback内部的this指向了window4.解决callback内部的this问题 3.构造器调用1.普通构造器2.如果构造器显示地返回了一个object类型对象... 查看详情

javascript设计模式与开发实践阅读笔记——迭代器模式

迭代器模式：指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序... 查看详情

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

命令模式：有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么，此时希望用一种松耦合的方式来设计软件，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。 说法很... 查看详情

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

代理模式：是为一个对象提供一个代用品或占位符，以便控制对它的访问。代理模式的关键是，当客户不方便直接访问一个对象或者不满足需要的时候，提供一个替身对象来控制对这个对象的访问，客户实际上访问的是替身对象... 查看详情

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

策略模式：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。我的理解就是把各种方法封装成函数，同时存在一个可以调用这些方法的公共函数。这样做的好处是可以消化掉内部的分支判断，使代码效率更... 查看详情

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

1.如何正确使用闭包1.常用闭包varasd=(function(){varvalue=0//私有变量放入内存returnfunction(){//biubiubiu发射火箭}})();asd(); 2.一个引用引发的闭包问题varasdf=function(){varvalue=0;returnfunction(){//火箭升空}}varf=asdf();//作为一个函数的引用引发... 查看详情

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

定义单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点。具体来说，就是保证有些对象有且只有一个，比如线程池、全局缓存、浏览器中的window对象等。在js中单例模式用途很广，比如登录悬浮窗，我希望无... 查看详情

javascript设计模式与开发实践阅读笔记——高阶函数的其他应用

高阶函数的其他应用1.currying函数柯里化，又称部分求值，一个currying的函数首先会接受一些参数，接受了这些参数之后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待... 查看详情

javascript设计模式与开发实践读书笔记（1-3章）

第一章面向对象的Javascript1.1多态在面向对象设计中的应用  多态最根本好处在于，你不必询问对象“你是什么类型”而后根据得到的答案调用对象的某个行为--你只管调用行为就好，剩下的一切多态会搞定换句话说就是：... 查看详情

javascript设计模式与开发实践读书笔记http://www.open-open.com/lib/view/open1469154727495.html

JavaScript设计模式与开发实践读书笔记最近利用碎片时间在Kindle上面阅读《JavaScript设计模式与开发实践读书》这本书，刚开始阅读前两章内容，和大家分享下我觉得可以在项目中用的上的一些笔记。我的github项目会不定时更新，... 查看详情

学习笔记javascript设计模式与开发实践（职责链模式）----13http://blog.csdn.net/pigpigpig4587/article/details/50442406#

   第13章职责链模式职责链模式的定义是：使多个对象都有机会处理请求，从而避免请求的发送和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到一个对象处理它为止。职责链模式的... 查看详情

javascript高级程序设计笔记(很重要尤其是对象的设计模式与继承)

varobj={‘a‘:‘a‘};varfun=function(){}console.log(typeofobj);//objectconsole.log(typeoffun);//functionvara;console.log(a===undefined);//trueconsole.log(typeofb);//true未声明的变量使用会报错，但是他的typeof=undefinedvar 查看详情

《javascript高级程序设计》笔记目录

第1章什么是JavaScript第2章HTML中的JavaScript第3章语言基础第4章变量、作用域与内存第5章基本引用类型第6章集合引用类型第7章迭代器与生成器第8章对象、类与面向对象编程第9章代理与反射第10章 查看详情

[笔记]《javascript高级程序设计》-ajax与comet

    在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。一、XMLHttpRequest对象1XHR的用法    在使用XHR对象时，要调用的第一个方法是open()，它接受3个参数：... 查看详情

[笔记]《javascript高级程序设计》-事件

    JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预定事件，以便时间发生时执行相应的代码。这种在传统软件工程中... 查看详情