在javascript编程中,this关键字经常让初学者感到迷惑,这里,针对此this根据查阅的资料和个人的理解分享一下,纯手打,大神勿喷。

首先先说一下this的指向,大致可以分为以下四种。

1.作为对象的方法调用。

2.作为普通函数调用。

3.构造器调用。

4.Function.prototype.call或者是Function.prototype.apply调用。

这四种调用很重要,如果能彻底理解了,应该不会再对这个this感到迷惑了。

1.作为对象的方法调用

         var obj = {
value: 1,
getValue: function() {
console.log(this === obj);//输出 true
console.log(this.value); //输出 1
}
};
obj.getValue();

2.作为普通函数调用

当函数不作为对象的属性被调用时,也就是普通的函数调用方式,通常来讲,this是指向全局对象的,在浏览器里,也就是window对象。

         window.name = "michael";
var obj = {
name:"tom",
getName:function() {
return this.name;
}
};
var getName = obj.getName;
console.log(getName()); //输出 michael

3.构造器调用

除了宿主提供的一些内置函数,大部分的javascript函数可以当构造器来使用,它和普通函数的区别在于被调用的方式。当使用new来调用的时候,通常是返回一个对象,构造器里的this就指向这个返回的对象。

         var myClass = function(){
this.name = "michael";
};
var obj = new myClass();
console.log(obj.name);// 输出michael

但是,使用new调用的时候,还需要注意这样一个问题,如果构造器显式返回一个object类型的对象的时候,那么这次最终返回的是这个对象,而不是this.

         var myClass = function(){
this.name = "michael";
return {//显式返回一个对象
name:"tom"
};
};
var obj = new myClass();
console.log(obj.name);// 输出tom

上述情况需要特殊注意.

4.Function.prototype.call或者是Function.prototype.apply调用

与第二种普通函数调用相比,call或者apply可以动态改变this的指向,听着蛮高大上的。

         var obj = {
name:"michael",
getName:function() {
return this.name;
}
};
var obj2 = {
name:"tom"
};
console.log(obj.getName()); //输出 michael
console.log(obj.getName.call(obj2)); //输出 tom

通过代码分析来看,显然this的指向已经人为的改变了。

以上就是关于this的一点小小的分享。

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

分享点干货(此this非彼this)this的详细解读的更多相关文章

  1. 如何走上更高平台分享传递干货知识:(开通个人Github面向开源及私有软件项目的托管平台:https://github.com/zlslch/)(图文详解)(博主推荐)

    不多说,直接上干货! https://github.com/ 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时,大家可以关注我的个人博客:    http ...

  2. 分享原创可复用且非侵入性代码生成工具(for .net)

    入行IT十年了,这是本人第一次网上’献丑‘.迫于工作压力,花了大半年时间写了这个生成器以辅助开发.如有价值请多多给予建议,谢谢 好了,废话少说,开动! QA. 1.为什么要用代码生成器? 当然是为了快 ...

  3. 今日分享一点干货。PHP中课程表的实现。

    首先贴代码,代码贴完再细说: 前段HTML: <div id="studentRead" class="reading" style="z-in ...

  4. iOS社会化分享(干货)

    一.苹果原生集成的社会化分享 1.哪些平台 (1)Twitter (2)FaceBook (3)Flickr (4)Vimeo (5)新浪微博  :iOS6 (6)腾讯微博 : iOS7 2.框架 : ...

  5. uni-app开发经验分享二十: 微信小程序 授权登录 获取详细信息 获取手机号

    授权页面 因为微信小程序提供的 权限弹窗 只能通用户确认授权 所以可以 写一个授权页面,让用户点击 来获取用户相关信息 然后再配合后台就可以完成登录 <button class="bt ...

  6. .net xml 增删改查基础复习及干货分享

    今天做做项目时,有一个需求需要用到一些固定的文本数据,觉得将这些需要存储的信息直接写在代码里很不友好,放在数据库中存储又觉得不够方便,自然就想到了使用xml来进行操作,我平常在项目中其实用到xml的机 ...

  7. 干货: 可视化项目实战经验分享,轻松玩转 Bokeh (建议收藏)

    作者 | Will Koehrsen 翻译 | Lemon 译文出品 | Python数据之道 (ID:PyDataRoad) 本文通过一个项目案例,详细的介绍了如何从 Bokeh 基础到构建 Bok ...

  8. 干货分享:Essay写作收集论据的三个方法

    在很多时候,中国留学生写出的Essay在西方学术界看来是存在plagiarism的情况.并不是说咱们写的所有东西都是抄袭,而是思维逻辑和利用证据的方式与西方权威的academic writing不同. ...

  9. 一文读懂阻塞、非阻塞、同步、异步IO

    介绍 在谈及网络IO的时候总避不开阻塞.非阻塞.同步.异步.IO多路复用.select.poll.epoll等这几个词语.在面试的时候也会被经常问到这几个的区别.本文就来讲一下这几个词语的含义.区别以 ...

随机推荐

  1. JAVA基础-面向对象05

    一.面向对象的引入 解决问题的时候,首先要会分析思路,这个思路就是我们生活中解决一个问题的方法步骤: 有了思路之后,再把思路使用java代码来解决: 但是 计算总分的需求变了 分析:原来在一个程序中, ...

  2. Android 截屏的各种骚操作

    本文公众号「AndroidTraveler」首发. 背景 在实际的应用场景中,Android 手机的截屏其实是很普遍的. 比如说 PPT 演示,比如说技术博客图文并茂讲解. 因此懂得 Android ...

  3. E20180327-hm

    renew vt. 补充; 重新开始; 使更新; 使恢复; vi. 重申,重复强调; 重新开始; renewal  n. 重建,重生; 更新,革新; 重申; 合同的续订;

  4. hdoj1116【欧拉回路】

    题意: 应该是求一个路径让所有的单词能够首尾连起来,不需要头和尾的单词也连起来...应该很容易懂吧...我这里讲的好烂.. 思路: 从欧拉回路的定义引申过来. 1. 连通. 2. 入度和出度问题. 问 ...

  5. AT2534 港湾設備 (Port Facility)

    洛谷 先膜一下Iscream巨巨 首先我们可以把题目转化为线段覆盖,如果两条线段相交(不算某一条完全在另一条里面的情况),那么这两条线段代表的集装箱就不能放到同一个栈里,我们在它们之间连一条边.如果图 ...

  6. Luogu P3946 ことりのおやつ(小鸟的点心) 【最短路】By cellur925

    题目传送门 日本的冬天经常下雪.不幸的是,今天也是这样,每秒钟雪的厚度会增加q毫米. 秋叶原共有n个地点,编号从1到n.每个地点在开始的时候的积雪高度为hi. 有m条双向道路连接这些地点,它们的长度分 ...

  7. 题解报告:hdu 1520 Anniversary party(树形dp入门)

    Problem Description There is going to be a party to celebrate the 80-th Anniversary of the Ural Stat ...

  8. 利用uiautomator实现Android移动app启动时间的测试

    为了减少因手工测试的反应误差,这里介绍下如何利用Android自带的自动化测试工具uiautomator实现app启动时间的测试. 测试基本思路如下: 1.启动前记录当前的时间戳 2.启动app,直至 ...

  9. C. Arcade dp二维费用背包 + 滚动数组 玄学

    http://codeforces.com/gym/101257/problem/C 询问从左上角走到右下角,每次只能向右或者向左,捡起三种物品算作一个logo,求最多能得到多少个logo. 设dp[ ...

  10. Java-每日编程练习题③

    一.计算圆周率 中国古代数学家研究出了计算圆周率最简单的办法: PI=4/1-4/3+4/5-4/7+4/9-4/11+4/13-4/15+4/17...... 这个算式的结果会无限接近于圆周率的值, ...