this在js中是一个特别的关键字,被自动保存在所有函数的作用域中。

为什么要用this

this提供一个对象方式隐式传递一个对象的引用,因此可以将api设计的简洁并且容易复用。看下面两段代码的比较:

function identify() {
return this.name;
}
function speak() {
return "hello,i am " + identify.call(this);
}
var me = {
name:"tony"
};
var you = {
name:"walker"
};
var man = identify.call(you);
console.log(man); //walker
var boy = speak.call(me);
console.log(boy); //tony

this Code

function identify(context) {
return context.name;
}
function speak(context) {
return "hello i am " + identify(context);
}
var me = {
name:"tony"
};
var you = {
name:"walker"
};
console.log(identify(me));
console.log(speak(you));

context Code

this误解

1.this指向函数自身。下面的代码让大家看到this并不像我么所想的那样指向函数本身。

function foo(i) {
console.log("foo: " + i);
this.count++;
}
foo.count = 0;
for(var i =0;i<10;i++){
if(i>5){
foo(i);
}
};
console.log(foo.count); //

js把函数看成一个对象,可以在函数调用时存储状态(属性的值),执行foo.count =0时,的确想函数添加了一个属性count。但是函数内部代码this.count中的this并不指向函数对象。

2.this指向函数的作用域。需要明确的是this在任何情况下都不指向函数的的词法作用域。

function boo() {
var a = 0;
this.bar();
}
function bar() {
console.log(this.a); //a is undefined
}

this到底是什么

this是在运行时绑定的,并不在编写时绑定,它的上下文取决于函数调用时的各种条件。this绑定和函数申明没有关系,只取决于函数的调用方式。当函数被调用时,会创建一个活动记录,这个记录会包含函数在那里被调用(调用栈),调用方式,传参方式等。可以说谁调用this就指向谁。

this实际上是在函数调用的时候发生绑定,它指向什么完全取决于函数在那里被调用。

下一篇文章会详细的说明this

JavaScript中的关于this的更多相关文章

  1. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  2. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  3. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  4. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  5. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  6. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

  7. 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  8. 简单分析JavaScript中的面向对象

    初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

  9. Javascript中的valueOf与toString

    基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...

  10. 关于javascript中的this关键字

    this是非常强大的一个关键字,但是如果你不了解它,可能很难正确的使用它. 下面我解释一下如果在事件处理中使用this. 首先我们讨论一下下面这个函数中的this关联到什么. function doS ...

随机推荐

  1. m_sequencer、p_sequencer

    https://blog.csdn.net/zhajio/article/details/79608323 p - parent sequencer - 要处理的实际sequencer类型的句柄,这个 ...

  2. 337. House Robber III二叉树上的抢劫题

    [抄题]: The thief has found himself a new place for his thievery again. There is only one entrance to ...

  3. svn 清理失败的解决方法

    首先 下载 SQLiteSpy   工具, 解压后如下图所示, 打开 .exe  应用程序,File ,opendatabase 选中wc.db  然后执行 delete  from  work_qu ...

  4. Linux的php-fpm优化心得-php-fpm进程占用内存大和不释放内存问题(转)

    原文地址:https://wzfou.com/php-fpm/ 最近发现博客的内存老是隔三差五地被“吃掉”了,登录到后台后偶尔会出卡顿的情况,一开始怀疑是Swap不够导致的,于是给VPS主机增加了几个 ...

  5. 优秀的 Spring Cloud 开源软件

    Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消息总线.负载均衡.断路器.数据监控等,都可以用 ...

  6. 14. pt-kill

    pt-kill h=192.168.100.101,P=3306,u=admin,p=admin \--match-user "user01" \--match-host &quo ...

  7. 【转】C#单元测试,带你快速入门

    [转]C#单元测试,带你快速入门 注:本文示例环境 VS2017 XUnit 2.2.0 单元测试框架 xunit.runner.visualstudio 2.2.0 测试运行工具 Moq 4.7.1 ...

  8. python抢火车票 短信通知

    # -*- coding: utf-8 -*- from splinter.browser import Browser from time import sleep import traceback ...

  9. ABP框架系列之十六:(Dapper-Integration-Dapper集成)

    Introduction Dapper is an object-relational mapper (ORM) for .NET. Abp.Dapper package simply integra ...

  10. java的poi 读取exc 文件

    package lizikj.bigwheel.shop.util.excel; import java.io.File; import java.io.FileInputStream; import ...