• 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. js－ 类数组对象

    JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法. 而对于一 ...

  2. ArcGIS中的数据连接问题——数据类型不统一

    博主在研究空间数据分布的时候经常会用到 ArcGIS 进行空间数据可视化.但是有时候会由于数据类型不统一而无法将 csv 中的数据连接到底图上.比如在底图中的数据是字符串格式,而 csv 中是数字格式 ...

  3. 无重复字符的最长子串-LeetCode-第3题-C++

    题目:无重复字符的最长子串 题目描述:给定一个字符串,找出不含有重复字符的最长子串的长度. 最长不重复子串可能有很多个,但是其长度只有一种. 方法一:暴力搜索法 方法二:滑动窗口 哈希表:要查找一个元 ...

  4. c++字符串前几位，后几位的截取

    参考 1. https://blog.csdn.net/haijunsm/article/details/82733584 完

  5. markdown使用问题

    1.配置自定义的markdown.css https://github.com/sameer1994kiki/markdown-css 2.代码块 一行`` 多行 ``` <code>&l ...

  6. sudo操作

    在非root权限下,无法执行 vim /etc/profile 并保存,提示如下错误: "profile" E212: Can't open file for writing Pr ...

  7. C++学习（十六）（C语言部分）之 数组三

    复习 以及 测试 /* 一维数组 数组是相同的数据的一个集合 <类型><数组名>[下标表达式]={数组元素 初始值}; 数组名和变量的命名规则是一样的 数组名是一个地址 数组下 ...

  8. Vim+Ctags+Cscope安装

    对比了下,感觉还是Vim比较专业. 一:使用说明: ‘/’查找忽略大小写,比如需要查找“book”,当输入/b的时候会自动找到第一个以"b"开头的单词 实现C程序的缩减 查询中自由 ...

  9. Go Example--range

    package main import "fmt" func main() { nums := []int{2,3,4} sum :=0 //rang 遍历切片 for _,num ...

  10. 【BZOJ4817】【SDOI2017】树点染色

    不算学会lct...... 原题: Bob有一棵n个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同.定义一条路 径的权值是:这条路径上的点(包括起点和终点)共有多少种 ...