JavaScript this的理解
一直对js的this不怎么理解,最近看了JavaScript 语言精髓的相关章节,有点清晰的理解了,记录记录
/* 来自: JavaScript 语言精髓 方法:当一个函数被定义为对象的一个属性时,我们称它为一个方法. this : 在函数访问this时,this被绑定到了 全局对象. */ //全局函数
var log = function(msg){
document.writeln("<br>" + msg + "<br>");
}; log("**************thistest.js***************"); //定义一个全局变量
var value = 100; //函数
var add = function(a, b){
var value = 11;
//访问内部变量
log("add:value = " + value); // 输出 add:value = 11
//此时访问this时,this绑定的全局对象,如 this.value 可以访问到上面定义的 value
log("add:this.value = " + this.value); // 输出 100
return a + b;
} // add是一个函数,在add里访问 this ,this绑定到的是全局对象 add(1, 2);
//输出:
//add:value = 11
//add:this.value = 100
下面定义一个对象
//对象
var myObj = { //对象的属性
value:0, //方法
increment:function(inc){ //此时访问this时,this绑定的时myObj对象
log("myObj.increment():myObj.value = " + this.value);//输出 myObj.value 的值 //调用一次 value的值增加1
this.value += typeof inc ==='number'?inc : 1; } };
有时候我们在方法内部会定义函数,那么函数怎么调用对象属性呢,如果在函数内容直接用this是访问不到对象的
//对象
var myObj = { //对象的属性
value:0, //方法
increment:function(inc){ //此时访问this时,this绑定的时myObj对象
log("myObj.increment():myObj.value = " + this.value);//输出 myObj.value 的值 //调用一次 value的值增加1
this.value += typeof inc ==='number'?inc : 1; //定义内部函数,注意还是函数,所以函数内部访问this还是只能访问到 全局对象
var inFun = function(){
//此时访问this时,this绑定的全局对象,如 this.value 可以访问到上面定义的 value
log("myObj.increment.inFun:this.value = " + this.value);
};
inFun();
} };
为了能在inFun函数内访问到myObj对象,我们先把myObj对象保存在一个变量里,
//对象
var myObj = { //对象的属性
value:0, //方法
increment:function(inc){ //把当前对象myObj引用保存在self变量,随后的函数就可以访问self 来代替访问myObj对象
var self = this; //此时访问this时,this绑定的时myObj对象
log("myObj.increment():myObj.value = " + this.value);//输出 myObj.value 的值 //调用一次 value的值增加1
this.value += typeof inc ==='number'?inc : 1; //定义内部函数,注意还是函数,所以函数内部访问this还是只能访问到 全局对象
var inFun = function(){
//此时访问this时,this绑定的全局对象,如 this.value 可以访问到上面定义的 value
log("myObj.increment.inFun:this.value = " + this.value);
//
log("myObj.increment.inFun:myObj.value = " + self.value);
};
inFun();
} };
给 myObj增一个double方法
myObj.double = function(){
var self = this;
var helper = function(){
//此处不能用 this.value 访问到myObj.value的值
//add函数前的this可以省略,也可以用 this.add(a,b);
self.value = add(self.value, self.value);
};
helper();
};
调用double方法,即可使用myObj.value的值翻倍
JavaScript this的理解的更多相关文章
- javascript单例模式的理解
javascript单例模式的理解 阅读目录 理解单例模式 使用代理实现单例模式 理解惰性单例 编写通用的惰性单例 单例模式使用场景 回到顶部 理解单例模式 单例模式的含义是: 保证一个类只有一个实例 ...
- JavaScript面向对象的理解
JavaScript面向对象的理解 笔记链接: http://pan.baidu.com/s/1c0hivuS 1:JavaScript 中分两种对象,函数对象和普通对象new Function() ...
- javascript javascript面向对象的理解及简单的示例
javascript面向对象的理解及简单的示例 零.本节重点: 1.封装: 2.继承: 壹.下面理解: 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的 ...
- javaScript深入浅出之理解闭包
javaScript深入浅出之理解闭包 引言 闭包是个老生长谈的话题了,对于闭包网上也有很多不同的看法 <你不知道的javaScript>对于闭包是这么定义的:函数创建和函数执行不在同一个 ...
- JavaScript:彻底理解同步、异步和事件循环(Event Loop) (转)
原文出处:https://segmentfault.com/a/1190000004322358 一. 单线程 我们常说"JavaScript是单线程的". 所谓单线程,是指在JS ...
- 通过JavaScript原型链理解基于原型的编程
零.此文动机 用了一段时间的Lua,用惯了Java C++等有Class关键字的语言,一直对Lua的中的面向对象技术感到费解,一个开源的objectlua更是看了n遍也没理解其中的原理,直到看到了Pr ...
- 细心看完这篇文章,刷新对Javascript Prototype的理解
var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } 分析上面这段代码,看看有没有问题 ...
- 【JavaScript】深入理解JavaScript之强大的原型和原型链
由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOw ...
- 对javascript this的理解
对于this的理解,大部分时间都比较模糊,最近几天做了一些研究,记录一下 首先应该明白,this是执行上下文的一个属性,它的值取决于执行上下文,执行上下文和函数调用方式相关,定义一个function的 ...
- 深入理解JavaScript系列+ 深入理解javascript之执行上下文
http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html http://blog.csdn.net/hi_kevin/article/d ...
随机推荐
- 第三章 in,not in 的理解,limit限制结果集
IN 运算符用来判断表达式的值是否位于给出的列表中:如果是,返回值为 1,否则返回值为 0.NOT IN 的作用和 IN 恰好相反,NOT IN 用来判断表达式的值是否不存在于给出的列表中:如果不是 ...
- Spring Boot AOP 扫盲,实现接口访问的统一日志记录
AOP 是 Spring 体系中非常重要的两个概念之一(另外一个是 IoC),今天这篇文章就来带大家通过实战的方式,在编程猫 SpringBoot 项目中使用 AOP 技术为 controller 层 ...
- 解决POI多线程导出时数据错乱问题
项目里有一个导出功能,但随着数据量大量上涨,导出时间长到不可忍受,遂重写此接口,多线程导出的代码并不复杂,每页有一条线程负责写入,利用线程池去调度,用countdownLatch保证在所有数据写完后再 ...
- 【Azure API 管理】API Management如何有效且快速更新呢?如对APIs/Policy等设置内容
问题描述 APIM中的内容(API, Policy)等内容,如果有需要更新时候,通常可以在Azure APIM门户上操作,通过一个接口一个设置的修改,也可以针对一个接口导入/导出的方式修改.当APIM ...
- node + express本地搭建服务器,开启一个新的项目
1.安装node.地址:https://nodejs.org/zh-cn/download/ 2.新建一个文件夹test,进入到该文件夹下 a.按shift + 鼠标右键 ,选择在此处打开命令窗口( ...
- k8s基础环境配置:基于CentOS7.9
k8s基础环境配置:基于CentOS7.9 wmware15安装centos7.9:https://www.cnblogs.com/uncleyong/p/15261742.html 1.配置静态ip ...
- 【C# IO 操作】使用StringWriter和StringReader的好处
当你有一组应用程序接口(API)只允许用Writer或Reader作为输入,但你又想使用String,这时可以用StringWriter或StringReader. 假设有下面这样一个process方 ...
- Delegate 委托细说
目录 委托的申明 委托的赋值 委托实例方法的使用C#Invoke\BeginInvoke\Endinoke 系统自带的委托Action.Action<T>.Func<T>.P ...
- Specified cast is not valid(C#) 引发的思考(装箱,拆箱本质)
没有很华丽的语言,直接拿代码说事情把. 这段代码,会报错吗? 结论:当然不会 这段代码会报错了.原因是为啥? 这里面的水比较深.也要提醒各位写代码的适合要引起注意.异常:System.Invalid ...
- iredmail邮件系统离线搭建手册-从零到无
--时间:2020年10月20日 --作者:飞翔的小胖猪 概述 前言 iRedMail 是一个基于 Linux/BSD 系统的零成本.功能完备.成熟的邮件服务器解决方案.iRedMail 是一个开源. ...