- 浏览: 1092050 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
javascript之function的this
一、this 的定义 与 函数的调用
在 javascript 中, function 中的 this 指代的是: 调用 function 执行时的上下文。
也就是说,调用哪个对象的 function,this就指代哪个对象。默认是 window 对象。
1. this 可以指代一个普通对象
2. this 可以指代 默认的 window 对象
3. this 可以指代 function 对象的 prototype 对象
4. this 可以指代 function 对象的 一个实例
可以看出:
1) 调用哪个对象的 function , this 就指代哪个对象。
2) 所调用的对象,即:function运行时的上下文。
3) this 与 怎样调用 function 有关。
二、函数运行时,this 的引用
1. this 可以在 function 的 prototype 对象中被引用
三、function 中与 this 相关的两个函数: apply(), call()
前面说了,既然 this 是与调用 function 的对象有关。
那么,当调用对象的 function 时,是否可以指定一个运行时的上下文 this 对象?
1、理解 function 的 apply() 方法。
“The apply() method calls a function with a given this value and arguments provided as an array.”
apply 什么呢? 把当前的对象(只要类型是 object 即可) apply 给 function,作为该 function 的 this 对象。
apply 方法针对的是将要执行的 function 的 this。 它可以在调用函数时,指定一个它的 this 对象。
即:在已经有预设定值的对象上,继续进行this的创建。
1) this 指向执行函数的对象 - 将 function 作为参数
2) this 指向执行函数的对象 - 直接执行函数
3) this 指向执行函数的对象 - 指定一个 this 执行
apply() 方法有两个目地:
1. 指定函数执行时的 this 对象;
2. 运行函数。
(这个目地似乎没有通过从 apply 的方法名称上体现出来,
或许应该叫: apply_and_run 更能体现出这个方法的作用 )
———————————————————————————————————————————————————————————————————————————
扩展阅读:function 中与 this 相关的另一个函数: bind()
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
对比 apply() / call():
apply()/ call() 用来调用(执行)函数,而 bind() 用来创建函数。
Syntax
Parameters
thisArg
The value to be passed as the this parameter to the target function when the bound function is called. The value is ignored if the bound function is constructed using the new operator.
arg1, arg2, ...
Arguments to prepend to arguments provided to the bound function when invoking the target function.
参考:
Preserving a reference to “this” in JavaScript prototype functions
http://stackoverflow.com/questions/2025789/preserving-a-reference-to-this-in-javascript-prototype-functions
—————————————
javascript 函数基础系列文章
1、JavaScript之变量的作用域
2、javascript之变量类型与变量声明及函数变量的运行机制
3、javaScript之function定义
4、javascript之function的prototype对象
5、javascript之function的(closure)闭包特性
6、javascript之function的this
7、javascript之function的apply(), call()
___________
javascript 面向对象编程系列文章:
1、javaScript之面向对象编程
2、javascript之面向对象编程之属性继承
3、javascript之面向对象编程之原型继承
-
-
引用请标明
原文出处: http://lixh1986.iteye.com/blog/1960343
-
一、this 的定义 与 函数的调用
在 javascript 中, function 中的 this 指代的是: 调用 function 执行时的上下文。
也就是说,调用哪个对象的 function,this就指代哪个对象。默认是 window 对象。
1. this 可以指代一个普通对象
var Bucky = { pringtFirstName: function(){ console.log("My name is Bucky."); console.log( this === Bucky ); // true } } Bucky.pringtFirstName();
2. this 可以指代 默认的 window 对象
function doSomethingWorthless(){ console.log("I am worthless."); console.log( this === window ); // true } doSomethingWorthless(); // window.doSomethingWorthless();
3. this 可以指代 function 对象的 prototype 对象
var foo = function(){}; foo.prototype.sayHello = function(){ this.name = "Hello,World!"; } foo.prototype.sayHello(); console.log(foo.prototype.name); // "Hello,World!"
4. this 可以指代 function 对象的 一个实例
foo = function(){} foo.prototype.sayHello = function(){ this.name = "Hello World !"; } var f = new foo(); f.sayHello(); console.log(f.name); // "Hello World !";
可以看出:
1) 调用哪个对象的 function , this 就指代哪个对象。
2) 所调用的对象,即:function运行时的上下文。
3) this 与 怎样调用 function 有关。
二、函数运行时,this 的引用
1. this 可以在 function 的 prototype 对象中被引用
foo = function(){ this.name = "Foo function."; } foo.prototype.sayHello = function(){ console.log( this.name ); //"Foo function." } var f = new foo(); f.sayHello(); // sayHello() 运行的上下文环境是 f 对象
三、function 中与 this 相关的两个函数: apply(), call()
前面说了,既然 this 是与调用 function 的对象有关。
那么,当调用对象的 function 时,是否可以指定一个运行时的上下文 this 对象?
1、理解 function 的 apply() 方法。
“The apply() method calls a function with a given this value and arguments provided as an array.”
apply 什么呢? 把当前的对象(只要类型是 object 即可) apply 给 function,作为该 function 的 this 对象。
apply 方法针对的是将要执行的 function 的 this。 它可以在调用函数时,指定一个它的 this 对象。
即:在已经有预设定值的对象上,继续进行this的创建。
1) this 指向执行函数的对象 - 将 function 作为参数
foo = function(){ this.name = "Foo function."; } foo.prototype.sayHello = function(){ var me = this; // this 在这里是 window 对象。 console.log(me.name); // null console.log(this.f.name); //"Foo function." } var f = new foo(); setTimeout(f.sayHello, 1000); // 运行的是 window.setTimeout()
2) this 指向执行函数的对象 - 直接执行函数
foo = function(){ this.name = "Foo function."; } foo.prototype.sayHello = function(){ var me = this; // this 在这里是 f 对象。 console.log(me.name); // "Foo function." console.log(this.f.name); // 报错:f 未定义 } var f = new foo(); f.sayHello(); // 运行的是 f
3) this 指向执行函数的对象 - 指定一个 this 执行
foo = function(){ this.name = "Foo function."; } foo.prototype.sayHello = function(){ var me = this; // this 在这里是 window 对象。 console.log(me.name); // null console.log(this.f.name); //"Foo function." } var f = new foo(); f.sayHello.apply(this, window); // 指定 this 为 window 对象
apply() 方法有两个目地:
1. 指定函数执行时的 this 对象;
2. 运行函数。
(这个目地似乎没有通过从 apply 的方法名称上体现出来,
或许应该叫: apply_and_run 更能体现出这个方法的作用 )
———————————————————————————————————————————————————————————————————————————
扩展阅读:function 中与 this 相关的另一个函数: bind()
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
对比 apply() / call():
apply()/ call() 用来调用(执行)函数,而 bind() 用来创建函数。
Syntax
fun.bind(thisArg[, arg1[, arg2[, ...]]])
Parameters
thisArg
The value to be passed as the this parameter to the target function when the bound function is called. The value is ignored if the bound function is constructed using the new operator.
arg1, arg2, ...
Arguments to prepend to arguments provided to the bound function when invoking the target function.
this.x = 9; var module = { x: 81, getX: function() { return this.x; } }; module.getX(); // 81 var retrieveX = module.getX; retrieveX(); // returns 9 - The function gets invoked at the global scope // Create a new function with 'this' bound to module // New programmers might confuse the // global var x with module's property x var boundGetX = retrieveX.bind(module); boundGetX(); // 81
参考:
Preserving a reference to “this” in JavaScript prototype functions
http://stackoverflow.com/questions/2025789/preserving-a-reference-to-this-in-javascript-prototype-functions
—————————————
javascript 函数基础系列文章
1、JavaScript之变量的作用域
2、javascript之变量类型与变量声明及函数变量的运行机制
3、javaScript之function定义
4、javascript之function的prototype对象
5、javascript之function的(closure)闭包特性
6、javascript之function的this
7、javascript之function的apply(), call()
___________
javascript 面向对象编程系列文章:
1、javaScript之面向对象编程
2、javascript之面向对象编程之属性继承
3、javascript之面向对象编程之原型继承
-
-
引用请标明
原文出处: http://lixh1986.iteye.com/blog/1960343
-
发表评论
-
Javascript 测试框架之 隐式声明 之 describe
2019-06-25 15:26 2449为什么使用 javascript 测试框架时,没有显式导入 d ... -
JavaScript之ECMAScript6新特性之_03_箭头函数(Arrow Function)
2018-01-25 13:46 1053一、简介 箭头函数(Arrow Function)是 ES6 ... -
JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await
2018-01-12 16:51 2255刚出来不久的 ES8 包含了 async 函数,它的出现,终于 ... -
JavaScript之ECMAScript6新特性之_01_开篇
2017-08-17 02:54 561点此查看全部: http://es6-features.org ... -
jQuery Versions - browser support
2017-08-12 04:19 1553jQuery 3.2.1 Support Deskto ... -
基于HTML5实现的中国象棋游戏
2017-06-24 02:24 1626HTML5实现中国象棋游戏 http://www.w2bc.c ... -
JavaScript之跨域请求解决方案
2017-06-07 11:03 3897浏览器处于安全原因,在使用 Ajax 进行请求访问时,不允许跨 ... -
JavaScript之 25 道面试题
2017-04-17 17:05 91325 Essential JavaScript Intervi ... -
JavaScript小应用之分页算法
2017-03-16 12:56 629效果图: function getPagina ... -
jQuery之empty() VS. remove()
2017-03-16 10:32 687jQuery empty() vs remove() Wh ... -
jQuery之 prop() VS. attr()
2017-03-14 16:43 624attr() 用于自定义属性,id ; prop() 用于 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 619Jquery mouseenter() vs mouseove ... -
javascript之JS操作iframe
2017-02-28 14:56 2135JS操作iframe 1. 获得iframe的w ... -
javascript之面向对象编程之原型继承
2017-01-02 15:34 1044前文讲到“属性继承” ... -
HTML5之Cookie,localStorage 与 sessionStorage
2016-12-22 18:35 808详说 Cookie, LocalStorage 与 ... -
jquery之live(), delegate(), on() 方法
2016-11-26 23:48 882通过下面的一个实例理解 jQuery 的 live(), de ... -
javascript之小应用:网页在线聊天
2016-11-08 11:48 4213概览 这款使用 PHP 和 javascript 搭建的 ... -
javascript之编程序题目
2016-11-06 17:30 10031. 判断两个字符串是否:字母相同切长度相同(空格不算)。 ... -
javascript之面向对象编程之属性继承
2016-10-23 21:09 834函数继承可以分为两种:1、继承其 this 属性 2、继承其 ... -
javascript 之 undefined
2016-08-12 11:01 657一、用法 undefined 关键字有两种用法: 1. 如 ...
相关推荐
JavaScript 中的 this 关键字是一个非常重要的概念,它经常会使开发者感到困 惑。通常来说,this 的值是在函数被调用时确定的,其值取决于函数被调用的方 式。本文将介绍 JavaScript 中 this 的用法,从而帮助开发者...
JavaScript应用实例-1箭头函数和function的this对比.js
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP 深入理解JavaScript系列(7):S.O.L.I.D五大原则之开闭原则OCP 深入理解JavaScript系列(8):S.O.L.I.D五大原则之里氏替换原则LSP 深入理解...
深入理解JavaScript系列(13):This Yes this 深入理解JavaScript系列(14):作用域链 Scope Chain 深入理解JavaScript系列(15):函数(Functions) 深入理解JavaScript系列(16):闭包(Closures) 深入...
JavaScript 中的this 1.this是什么? 函数调用的时候会创建上下文,this 是组成上下文的一部分。因此每次函数被调用都会产生新的this,既this的值就是调用当前函数的对象。 2.作为普通函数在全局作用域中被使用 ...
This book provides a developer-level introduction along with more advanced and useful features of JavaScript. Coverage includes: JavaScript use with HTML to create dynamic webpages, language concepts ...
function test() { alert("oec2003"); return false; } c#代码: protected void Button1_Click(object sender, EventArgs e) { ClientScript.RegisterStartupScript(this.GetType(), "clear", ...
1、Javascript中的原型: 原型prototype是Javascript中特有的一个概念。通过原型,Javascript可以实现继承机制。 ... this.getName = function(){ return this.name; } } function Artist(type){
NodeJS和浏览器中this关键字的不同之处 学习过JavaScript的人肯定清楚 处在不同环境下this的指向问题。那么看下面的代码 var type = 1 function toWhere(){ this.type = 2; } toWhere(); console.log(type)...
With this digital Early Release edition of Programming JavaScript Applications, you get the entire book bundle in its earliest form—the author's raw and unedited content—so you can take advantage of...
直到昨天翻了一下《JavaScript王者归来》这本书才算对this有一个深刻的理解。 大至归结一下: 1. 函数调用者与所有者 JavaScript 中函数(function) 存在调用者 与 所有者这两个概念,调用者是指调用函数的对象,通常...
* Discover different ways to define a function in JavaScript * Create objects that go beyond the basic patterns of using object literals and constructor functions * Learn the options available for ...
大家在使用Javascript的时候经常被this这个家伙搞得晕头转向的。对大多数有OOP开发经验的开发人员来说this是当前作用域中引用普通元素的标识符,但是在Javascript中它却显得古灵精怪的,因为它不是固定不变的,而是...
This course will begin with providing insights and practical tips on advanced JavaScript features to build highly scalable web and mobile system and move on to some design patterns with JavaScript....
一般而言,在Javascript中,this指向函数执行时的当前对象。 Note 注意 this 是保留关键字,你不能修改 this 的值。 调用 JavaScript 函数 函数中的代码在函数被调用后执行。 作为一个函数调用 实例 function ...
this关键字 每个函数都有一个关键字叫this,在不同的情况下,this代表的内容也是不同的 1. 普通函数中的this代表window对象 function fn(){ console.log(this); } fn(); // window 2.定时器中的this代表window对象...
What you will learn from this book The basics of object-oriented programming, and how to apply it in the JavaScript environment How to set up and use your training environment (Firebug) In depth ...
Javascript中函数分类&this指向的实例详解 通过实例来说明吧 <script> //method1 function fn() { console.log('fn created '); } //method2 var fn2 = function () { console.log('fn2 created'); } //...
本文实例讲述了JavaScript使用function定义对象并调用的方法。分享给大家供大家参考。具体分析如下: JS中你可以通过函数的方式定义对象,下面的JS代码定义了一个movie的函数对象,然后通过new的方法声明对象,调用...