JavaScript中的关于this
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的更多相关文章
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- javascript中的this与函数讲解
前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...
- JavaScript 中的数据类型
Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...
- javascript中的操作符详解1
好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...
- 掌握javascript中的最基础数据结构-----数组
这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...
- javascript中变量提升的理解
网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...
- 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- 简单分析JavaScript中的面向对象
初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...
- Javascript中的valueOf与toString
基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...
- 关于javascript中的this关键字
this是非常强大的一个关键字,但是如果你不了解它,可能很难正确的使用它. 下面我解释一下如果在事件处理中使用this. 首先我们讨论一下下面这个函数中的this关联到什么. function doS ...
随机推荐
- sqlserver2017 重装过程中出现“无法找到数据库引擎启动句柄”错误的解决办法
sqlserver数据库引擎修改账号名,详情参考:http://blog.51cto.com/djclouds/2089047?utm_source=oschina-app 在SQL Server安装 ...
- 36. Valid Sudoku 判断九九有效的数独
[抄题]: Determine if a 9x9 Sudoku board is valid. Only the filled cells need to be validated according ...
- pythone函数基础(10)MD5加密
导入hashlib模块import hashlibs='yulin123456's.encode()#把数字转换成bytes类型m=hashlib.md5(s.encode())print(m.hex ...
- 【CSS】自定义checkbox样式
修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...
- stark组件开发之编辑功能实现
编辑功能.和添加一样! 唯一不同的就是, 需要编辑一个指定的 记录.这就需要,在列表页面, 渲染编辑的时候,添加一个 id 值: class UserInfoHandler(StartHandler ...
- Java最小化镜像制作
下载Oracle官网的JRE包,最终下载的包如下: jre-8u181-linux-x64.tar.gz 解压JRE包并删除不必要的文件 #解压 tar xf jre-8u181-linux-x64. ...
- c#NPOI读取excel 比interop和Microsoft.Jet.OLEDB.4.0 之类 的好的多
今天下午开始整理excel这块, 微软弄的那些库简直是个坑, 什么com注册之类的净是些报错. 在网上搜资料偶然碰见npoi ,好东西,值得使用 NPOI是指构建在POI 3.x版本之上的一个程序,N ...
- Vue中出现Do not use built-in or reserved HTML elements as component id:footer等等vue warn问题
错误示图: 原因:是因为在本地项目对应文件的<script>中,属性name出现了错误的命名方式,导致浏览器控制台报错! 诸如: name: header . . name: menu ...
- linux 查看信息-磁盘分区&网络
磁盘和分区 1.查看挂接的分区状态 2.查看所有交换分区 3.查看启动时IDE设备检测状况 网络 1.查看网络接口属性 2.查看防火墙设置 3.查看路由表 4.查看所有监听端口 5.查看所有已经建立的 ...
- addEventListener()方法
★JS事件的捕获阶段和冒泡阶段: 讨论的主要是两个事件模型:IE事件模型与DOM事件模型 IE内核浏览器的事件模型是冒泡型事件(没有捕获事件过程),事件句柄的触发顺序是从ChildNode到Paren ...