• 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. python2.7.9安装mysql-python模块

    我使用的系统版本是: SLES12-sp2 使用python连接Mysql数据库,需要安装mysql-python模块: 1. 首先安装pip: 从python官方网站下载get-pipe.py,执行 ...

  2. [LeetCode&Python] Problem 690. Employee Importance

    You are given a data structure of employee information, which includes the employee's unique id, his ...

  3. 打开视图 :1449 - the user specified as a definer ('root'@'%')does not exist

    从一个数据库数据迁移到本地localhost   程序在调用到数据库的视图时报错,直接在数据库中打开视图时也报错,类似:   mysql 1449 : The user specified as a ...

  4. FTP相关、用vsftpd搭建ftp、xshell使用xftp传输文件、使用pure-ftpd搭建ftp服务

    1.FTP相关(file transfer protocol,文件传输协议)   2.用vsftpd搭建ftp安装:yum install vsftpd -y创建一个虚拟用户:useradd  vft ...

  5. C++学习(三十)(C语言部分)之 栈和队列

    数据结构1.保存数据 2.处理数据数组+操作增查删改 栈和队列是一种操作受限的线性表 栈 是先进后出 是在一端进行插入删除的操作--->栈顶 另一端叫做栈底(栈和栈区是两个概念)(是一种数据结构 ...

  6. python------模块定义、导入、优化 ------->re模块

    该部分内容引用自:http://www.cnblogs.com/alex3714/articles/5161349.html 谢谢原博主的文章,只是自己学习,无其他使用. re模块 常用正则表达式符号 ...

  7. 不输入密码执行sudo 命令

    命令行执行的crontab 命令,但是需要包含sudo 才可以执行的命令,怎么办呢?见下: leo@leo-Ubuntu:/etc$ visudovisudo: /etc/sudoers: 权限不够v ...

  8. MySQL Transaction--事务无法正常回滚导致的异常

    问题表现:系统增删改操作明显变慢(由原来的几十毫秒变为几十秒) 查看未提交事务 ## 查看未提交的事务 ## SELECT p.ID, P.USER, P.HOST, p.DB, P.TIME, T. ...

  9. Hive GenericUDF2

    再来看一个分数统计的小例子. 在Hive中存在如下一张表: hive> describe tb_test2; OK name    string score_list  array<map ...

  10. Modern Data Lake with Minio : Part 1

    转自:https://blog.minio.io/modern-data-lake-with-minio-part-1-716a49499533 Modern data lakes are now b ...