• 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指针的更多相关文章

  1. 《JavaScript设计模式与开发实践》读书笔记-基础知识

    笔记内容多摘录自<JavaScript设计模式与开发实践>(曾探著),侵删. 面向对象的JavaScript 1. 动态需要类型和鸭子类型 鸭子类型 如果它走起路来像鸭子,叫起来也是鸭子, ...

  2. JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)

    说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...

  3. 《Javascript设计模式与开发实践》--读书笔记

    第2章 this call apply bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用. bind( ...

  4. JavaScript设计模式与开发实践 - 单例模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...

  5. 《javascript设计模式与开发实践》--- （单一职责原则）

    看的这本书叫<JavaScript设计模式与开发实践> 先规划一下看书的顺序,基础知识我已经大概的浏览了一遍了,没有留下笔记,以后有时间还会补上.本来打算顺着看的.但是我感觉我很难短时间内 ...

  6. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  7. JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...

  8. JavaScript设计模式与开发实践 - 策略模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...

  9. 《JavaScript设计模式》读书笔记——灵活的语言

    最近在读JavaScript设计模式这本书,准备搞一个系列来记录所学所想,其实主要原因是方便以后查阅. 第一章主要介绍了JS函数的不同定义与使用方法,用自己的方法去模拟类也是它的独有魅力所在. 首先, ...

随机推荐

  1. ECONOMETRICS CHAPTER2

    ♣回归函数/条件期望函数 Regression Function 前面已说过,回归分析是研究一个因变量对解释变量的依赖关系,将这种关系表示为函数形式就是回归函数,说明因变量的均值是如何随着解释变量的变 ...

  2. m3u8编码视频webgl、threejs渲染视频纹理demo

    <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>fz-live< ...

  3. 九度OJ1450题-产生冠军-MAP的使用

    题目1450:产生冠军 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:2839 解决:1161 题目描述: 有一群人,打乒乓球比赛,两两捉对撕杀,每两个人之间最多打一场比赛.球赛的规则如 ...

  4. js的调用方式

    1.元素绑定 给具体的元素绑定JS的事件 事件:由用户行为触发的操作(鼠标操作,键盘操作) 语法:<标签 事件函数名="JS代码"> et: onclick:单机事件 ...

  5. 51Nod 1084：矩阵取数问题 V2（多维DP）

    1084 矩阵取数问题 V2  基准时间限制:2 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  关注 一个M*N矩阵中有不同的正整数,经过这个格子,就能获得相应价值的奖励 ...

  6. hdu1796 How many integers can you find 容斥原理

    Now you get a number N, and a M-integers set, you should find out how many integers which are small ...

  7. maven(一)

    Maven的简介 什么是maven 是apache下的一个开源项目,是纯java开发,并且只是用来管理java项目的 Maven好处 普通的传统项目 maven项目 分析:maven项目为什么这么小? ...

  8. Java（控制台输出）实现猜数字小游戏

    import java.util.Scanner; import java.util.Random; public class GuestNum{ public static void main(St ...

  9. Using Elixir Dynamic Supervisors

    转自: https://blog.smartlogic.io/elixir-dynamic-supervisors/ I have been working on my side project Gr ...

  10. SCS Characteristics

    Each SCS is an autonomous web application. For the SCS's domain, all data, the logic to process that ...