一直对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的理解的更多相关文章

  1. javascript单例模式的理解

    javascript单例模式的理解 阅读目录 理解单例模式 使用代理实现单例模式 理解惰性单例 编写通用的惰性单例 单例模式使用场景 回到顶部 理解单例模式 单例模式的含义是: 保证一个类只有一个实例 ...

  2. JavaScript面向对象的理解

    JavaScript面向对象的理解  笔记链接: http://pan.baidu.com/s/1c0hivuS 1:JavaScript 中分两种对象,函数对象和普通对象new Function() ...

  3. javascript javascript面向对象的理解及简单的示例

    javascript面向对象的理解及简单的示例 零.本节重点: 1.封装: 2.继承: 壹.下面理解: 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的 ...

  4. javaScript深入浅出之理解闭包

    javaScript深入浅出之理解闭包 引言 闭包是个老生长谈的话题了,对于闭包网上也有很多不同的看法 <你不知道的javaScript>对于闭包是这么定义的:函数创建和函数执行不在同一个 ...

  5. JavaScript:彻底理解同步、异步和事件循环(Event Loop) (转)

    原文出处:https://segmentfault.com/a/1190000004322358 一. 单线程 我们常说"JavaScript是单线程的". 所谓单线程,是指在JS ...

  6. 通过JavaScript原型链理解基于原型的编程

    零.此文动机 用了一段时间的Lua,用惯了Java C++等有Class关键字的语言,一直对Lua的中的面向对象技术感到费解,一个开源的objectlua更是看了n遍也没理解其中的原理,直到看到了Pr ...

  7. 细心看完这篇文章,刷新对Javascript Prototype的理解

    var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } 分析上面这段代码,看看有没有问题 ...

  8. 【JavaScript】深入理解JavaScript之强大的原型和原型链

    由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOw ...

  9. 对javascript this的理解

    对于this的理解,大部分时间都比较模糊,最近几天做了一些研究,记录一下 首先应该明白,this是执行上下文的一个属性,它的值取决于执行上下文,执行上下文和函数调用方式相关,定义一个function的 ...

  10. 深入理解JavaScript系列+ 深入理解javascript之执行上下文

    http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html http://blog.csdn.net/hi_kevin/article/d ...

随机推荐

  1. TensorFlow优化器浅析

    本文基于tensorflow-v1.15分支,简单分析下TensorFlow中的优化器. optimizer = tf.train.GradientDescentOptimizer(learning_ ...

  2. Vue 源码解读(2)—— Vue 初始化过程

    当学习成为了习惯,知识也就变成了常识. 感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/blog ...

  3. VS2019如何设置程序以管理员权限启动

    最重要的一点.本文解释的是C#项目如何以管理员权限启动. 一个很大的误导项 该图片是C++程序的项目配置属性.C#项目中并找不到.然而网上的很多教程没有说清楚.导致我找了这个菜单找了很久. C#项目的 ...

  4. Flash挂马实验

    实验目的 了解Flash木马的原理和危害 实现实验所提到的命令和工具,得到实验结果 实验原理 利用Flash挂马的原理并模拟实现挂马 实验内容 掌握Flash挂马的原理并模拟实现挂马 实验环境描述 1 ...

  5. Django ORM 多表操作

    目录 Django ORM 多表操作 表模型 表关系 创建模型 逆向到表模型 插入数据 ORM 添加数据(添加外键) 一对多(外键 ForeignKey) 一对一 (OneToOneFeild) 多对 ...

  6. Vue 源码解读(9)—— 编译器 之 优化

    前言 上一篇文章 Vue 源码解读(8)-- 编译器 之 解析 详细详解了编译器的第一部分,如何将 html 模版字符串编译成 AST.今天带来编译器的第二部分,优化 AST,也是大家常说的静态标记. ...

  7. SQL Server 2005 - 让 SELECT 查詢結果额外增加递增序号

    /* 方法一*/SELECT 序號= (SELECT COUNT(客戶編號) FROM 客戶 AS LiMing                 WHERE LiMing.客戶編號<= Chan ...

  8. N种排序算法

    本文根据<算法(第4版)>和<算法图解>整理.文中代码使用python编写. (一)选择排序 每次遍历整个数组,选出其中最小值.如果数组长度为n,则需要(n-1)+(n-2)+ ...

  9. Eclipse Debug 调试步骤及注意事项

    debug方法 第一步:打开java代码文件,在左侧双击鼠标设置断点,或者在左侧右键点击Toggle Breakpoint 第二步:点击eclipse上方的"蜘蛛"按钮,点击deb ...

  10. POJ2112题解

    题目大意:K个挤奶机,C头牛,每个挤奶机最多可以接待M头牛,各个K,C之间可能有道路连接,要让每个牛都找到挤奶机,求最小的走的路程最远的牛所需走的距离. 思路:首先看到要最小化最大值,所以需要二分.可 ...