• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > Javascript this 的一些学习总结

Javascript this 的一些学习总结

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5教程,HTML5中国,Javascript this 的一些学习总结,html5cn,html5资料,html等相关知识,匿名希望在学习及工作中可以帮助到您
1.1.1 摘要

相信有C/C++、C#或Java等编程经验的各位,对于this关键字再熟悉不过了。由于Javascript是一种面向对象的编程语言,它和C/C++、C#或Java一样都包含this关键字,接下来我们将向大家介绍Javascript中的this关键字。
1.1.2 正文

由于许多面向对象的编程语言都包含this关键字,我们会很自然地把this和面向对象的编程方式联系在一起,this通常指向利用构造器新创建出来的对象。而在ECMAScript中,this不仅仅只用来表示创建出来的对象,也是执行上下文的一个属性:

activeExecutionContext = {
// Variable object.
VO: {...},
this: thisValue
};

全局代码中的this

// Global scope
// The implicit property of 
// the global object
foo1 = "abc";
alert(foo1); // abc

// The explicit property of 
// the global object
this.foo2 = "def";
alert(foo2); // def

// The implicit property of 
// the global object
var foo3 = "ijk";
alert(foo3); // ijk

前面我们通过显式和隐式定义了全局属性foo1、foo2和foo3,由于this在全局上下文中,所以它的值是全局对象本身(在浏览器中是window object);接下来我们将介绍函数中的this。
函数中的this

当this在函数代码中,情况就复杂多了,并且会引发很多的问题。
函数代码中this值的第一个特性(同时也是最主要的特性)就是:它并非静态的绑定在函数上。
正如此前提到的,this的值是在进入执行上下文(Excution context)的阶段确定的,并且在函数代码中的话,其值每次都不尽相同。
然而,一旦进入执行代码阶段,其值就不能改变了。如果要想给this赋一个新的值是不可能的,因为在那时this根本就不是变量了。
接下来,我们通过具体的例子说明函数中的this。
首先我们定义两个对象foo和person,foo包含一个属性name,而person包含属性name和方法say(),具体的定义如下:

// Defines foo object.
var foo = {
name: "Foo"
};

// Defines person object.
var person = {
name: "JK_Rush",
say: function() {
alert(this === person);
alert("My name is " + this.name);
}
};

person.say(); // My name is JK_Rush

// foo and person object refer to 
// the same function say
foo.say = person.say;

foo.say(); // My name is Foo.


通过上面的代码,我们发现调用person的say()方法时,this指向person对象,当通过赋值方式使得foo的say()方法指向peson中的say()方法时。我们调用foo的say()方法,发现this不是指向person对象,而不是指向foo对象,这究竟是什么原因呢?
首先,我们必须知道this的值在函数中是非静态的,它的值确定在函数调用时,具体代码执行前,this的值是由激活上下文代码的调用者决定的,比如说,调用函数的外层上下文;更重要的是,this的值是由调用表达式的形式决定的,所以说this并非静态的绑定在函数上。
由于this并非静态地绑定在函数上,那么我们是否可以在函数中动态地修改this的值呢?

// Defines foo object.
var foo = {
name: "Foo"
};

// Defines person object.
var person = {
name: "JK_Rush",
say: function() {
alert(this === person);
this = foo; // ReferenceError
alert("My name is " + this.name);
}
};

person.say(); // My name is JK_Rush

现在我们在方法say()中,动态地修改this的值,当我们重新执行以上代码,发现this的值引用错误。这是由于一旦进入执行代码阶段(函数调用时,具体代码执行前),this的值就确定了,所以不能改变了。
引用类型

前面我们提到this的值是由激活上下文代码的调用者决定的,更重要的是,this的值是由调用表达式的形式决定的;那么表达式的形式是如何影响this的值呢?
首先,让我们介绍一个内部类型——引用类型,它的值可以用伪代码表示为一个拥有两个属性的对象分别是:base属性(属性所属的对象)以及该base对象中的propertyName属性:

// Reference type.
var valueOfReferenceType = {
base: mybase,
propertyName : 'mybasepropertyName' 
};

引用类型的值只有可能是以下两种情况:

  • 当处理一个标识符的时候

  • 或者进行属性访问的时候

标识符其实就是变量名、函数名、函数参数名以及全局对象的未受限的属性。

// Declares varible.
var foo = 23;

// Declares a function
function say() {
// Your code.
}

中间过程中,对应的引用类型如下:

// Reference type.
var fooReference = {
base: global,
propertyName: 'foo'
};

var sayReference = {
base: global,
propertyName: 'say'
};

我们知道Javascript中属性访问有两种方式:点符号和中括号符号:

// Invokes the say method.
foo.say();
foo['say']();

由于say()方法是标识符,所以它对应于foo对象引用类型如下:

// Reference type.
var fooSayReference = {
base: foo,
propertyName: 'say'
};

我们发现say()方法的base属性值为foo对象,那么它对应的this属性也将指向foo对象。
假设,我们直接调用say()方法,它对应的引用类型如下:

// Reference type.
var sayReference = {
base: global,
propertyName: 'say'
};

由于say()方法的base属性值为global(通常来说是window object),那么它对应的this属性也将指向global。
函数上下文中this的值是函数调用者提供并且由当前调用表达式的形式而定的。如果在调用括号()的左边有引用类型的值,那么this的值就会设置为该引用类型值的base对象。 所有其他情况下(非引用类型),this的值总是null。然而,由于null对于this来说没有任何意义,因此会隐式转换为全局对象。
函数调用以及非引用类型

前面我们提到,当调用括号左侧为非引用类型的时,this的值会设置为null,并最终隐式转换为全局对象。
现在我们定义了一个匿名自执行函数,具体实现如下:

// Declares anonymous function
(function () {
alert(this); // null => global
})();

由于括号()左边的匿名函数是非引用类型对象(它既不是标识符也不属于属性访问),因此,this的值设置为全局对象。

// Declares object.
var foo = {
bar: function () {
alert(this);
}
};

(foo.bar)(); // foo.
(foo.bar = foo.bar)(); // global?
(false || foo.bar)(); // global?
(foo.bar, foo.bar)(); // global

这里注意到四个表达式中,只有第一个表达式this是指向foo对象的,而其他三个表达式则执行global。
现在我们又有疑问了:为什么属性访问,但是最终this的值不是引用类型对象而是全局对象呢?
我们注意到表达式二是赋值(assignment operator),与表达式一组操作符不同的是,它会触发调用GetValue方法(参见11.13.1中的第三步)。 最后返回的时候就是一个函数对象了(而不是引用类型的值了),这就意味着this的值会设置为null,最终会变成全局对象。
第三和第四种情况也是类似的——逗号操作符和OR逻辑表达式都会触发调用GetValue方法,于是相应地就会丢失原先的引用类型值,变成了函数类型,this的值就变成了全局对象了。
引用类型以及this的null值

对于前面提及的情形,还有例外的情况,当调用表达式左侧是引用类型的值,但是this的值却是null,最终变为全局对象(global object)。 发生这种情况的条件是当引用类型值的base对象恰好为活跃对象(activation object)。
当内部子函数在父函数中被调用的时候就会发生这种情况,通过下面的示意代码介绍活跃对象:

// Declares foo function.
function foo() {
function bar() {
alert(this); // global
}

  


 

您可能想查找下面的文章:

  • 一款利用html5和css3动画排列人物头像的实例演示
  • html5教程调用绘图api画简单的圆形代码分享
  • html5教程画矩形代码分享
  • html5教程制作简单画板代码分享
  • html5基础教程常用技巧整理
  • html5教程-Canvas入门
  • html5教程画矩形代码分享
  • HTML5晃动DeviceMotionEvent事件
  • HTML5教程之html 5 本地数据库(Web Sql Database)
  • HTML5中对contenteditable属性的解释与规定

相关文章

  • 2018-12-03怎么用Canvas压缩图片
  • 2018-12-03css3和H5实现波纹特效实例代码
  • 2018-12-03上周朋友圈被传奇世界H5破1500流水刷屏了,求千万爆款H5游戏背后的成功秘诀?
  • 2018-12-03使用canvas画“哆啦A梦”时钟的代码
  • 2018-12-03html5规定元素是否可拖动的属性draggable
  • 2018-12-03H5怎样做出日历校验功能
  • 2018-12-03CSS3的文字阴影—Text-Shadow
  • 2018-12-03通过手机浏览器打开APP或者跳转到下载页面的实现
  • 2018-12-03[HTML5游戏开发]挑战横版ACT(一):开天地黄忠初登场
  • 2018-12-03HTML5在canvas中绘制复杂形状附效果截图_html5教程技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 关于HTML5 Canvas旋转动画的2个例子
    • html5中重新加载音频/视频元素的方法load()
    • HTML5实现魔方游戏的代码
    • X/HTML5 和 XHTML2_html5教程技巧
    • H5 活动页之移动端 REM 布局适配方法的分析
    • HTML5之8 __Canvas 文本
    • HTML怎么导出生成word文档?
    • 服务器推送事件的详细介绍
    • 是不是表单中所有带 name 属性的都会被 form.submit() 提交?
    • 为何说 HTML5「no longer based on SGML」?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有