计划按例如以下顺序完毕这篇笔记:

  1. Java程序猿的JavaScript学习笔记(1——理念)
  2. Java程序猿的JavaScript学习笔记(2——属性复制和继承)
  3. Java程序猿的JavaScript学习笔记(3——this/call/apply)
  4. Java程序猿的JavaScript学习笔记(4——this/闭包/getter/setter)
  5. Java程序猿的JavaScript学习笔记(5——prototype)
  6. Java程序猿的JavaScript学习笔记(6——面向对象模拟)
  7. Java程序猿的JavaScript学习笔记(7——jQuery基本机制)
  8. Java程序猿的JavaScript学习笔记(8——jQuery选择器)
  9. Java程序猿的JavaScript学习笔记(9——jQuery工具方法)
  10. Java程序猿的JavaScript学习笔记(10——jQuery-在“类”层面扩展)
  11. Java程序猿的JavaScript学习笔记(11——jQuery-在“对象”层面扩展)
  12. Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)
  13. Java程序猿的JavaScript学习笔记(13——jQuery UI)
  14. Java程序猿的JavaScript学习笔记(14——扩展jQuery UI)

这是笔记的第3篇,聊聊JavaScript中的this。还有两种调用函数的特殊方式:call 和 apply。

作者博客:http://blog.csdn.net/stationxp

作者微博:http://weibo.com/liuhailong2008

转载请取得作者允许

this

JavaScript中的this和Java中的this差别较大。

学过Java的童鞋请忘掉你知道的关于this的一切。

JavaScript中的this是依赖于函数的。表示函数的调用者。有两个意思:第一,this不是函数本身;第二。函数被调用的时候才决定this指向谁。

分下面几种情况:

调用全局函数

看以下的代码:

<span style="background-color: rgb(255, 255, 153);"><span style="color:#FF0000;"><strong>代码段1:</strong></span></span>
function UiObject(){
    console.log(this.name || this.toString()); // 输出:[object Window]
    console.log(this===window); // 输出:true
}
UiObject()

默觉得window调用,this为window。

通过对象调用

<span style="background-color: rgb(255, 255, 153);"><span style="color:#FF0000;"><strong>代码段2:</strong></span></span>
function UiObject(){
this.render = function(str){
console.log('render this ',str,' by ' + this.toString());
console.log(this === UiObject); // false
<strong>console.log(this === ui); // true</strong>
}
}
var ui = new UiObject();
ui.render();

假设函数在原型中定义呢?

<span style="background-color: rgb(255, 255, 153);"><span style="color:#FF0000;"><strong>代码段3:</strong></span></span>
function UiObject(){}
UiObject.prototype = {
render : function(str){
console.log('render this ',str,' by ' + this.toString());
console.log(this === UiObject); // false
<strong>console.log(this === ui); // true</strong> ,结果一样。谁调用。this指向谁
}
};
var ui = new UiObject();
ui.render();

结果一样,在哪儿定义不重要,被谁调用才重要。有奶的就是娘,谁生的不重要,好现实...

再写段代码让这个特性更明显,例如以下:

<span style="background-color: rgb(255, 255, 153);"><span style="color:#FF0000;"><strong>代码段4:</strong></span></span>
 function hunt(){
console.log('To ',this.name + ', my dear lord! I will hunt ',this.target,' as your wish.');
console.log(this === hailong);
console.log(this === haichao);
} var hailong = {
name : 'Lord Hailong',
target : 'deer'
}; var haichao = {
name : 'Lord Haichao',
target : ' Little-Japs '
}; hailong.hunt = hunt;
// 输出:To Lord Hailong, my dear lord! I will hunt deer as your wish.
// 输出:true -- console.log(this === hailong);
// 输出:false -- console.log(this === haichao);
hailong.hunt(); haichao.kill = hunt;
// 输出:To Lord Haichao, my dear lord! I will hunt Little-Japs as your wish.
// 输出:false -- console.log(this === hailong);
// 输出:true -- console.log(this === haichao);
haichao.kill();

有奶就是娘,谁调用。this就指向谁。

被事件调用

被事件调用分几种情况:

1、<div
onclick='theFunc()'>

2、oDiv.onclick
= theFunc ;

第1中情况,this指向window,第2中情况,this指向oDiv。

arguments

和this类似,函数被调用时。argmuments将被赋值为传入的传入的參数数组。

能够通过 arguments.length获得传入參数的个数。能够通过arguments[idx]获得传入參数的值。

基于this的特性,我们须要特殊的方法灵活控制this的指向。

JavaScript为我们提供了call和apply两个方法。

call

在函数调用的时候。通过call方法,能够指定调用者。从而实现了对this的灵活绑定。语法例如以下:

func.call(invokerObject);

func是函数。invokerObject将被指定为函数的调用者。看以下的样例。

<pre name="code" class="javascript"><span style="background-color: rgb(255, 255, 153);"><span style="color:#FF0000;"><strong>代码段5:</strong></span></span>

function hunt(){}var hailong = {name : 'Lord Hailong',target : 'deer'};var haichao = {name : 'Lord Haichao',target : ' Little-Japs '};function printName(){console.log('Name:',this.name);}printName.call(hunt);printName.call(hailong);printName.call(haichao);


定义好printName方法后。希望能应用到hunt、hailong、haichao几个对象上。通过call函数就可以实现。printName函数中的this成功指向了通过call參数传入的对象。

printName.call(hailong)

等同于以下的语句:

hailong.printName = printName;

hailong.printName();

delete haiong.printName;

apply

通过call方法调用函数。假设有參数,从call方法的第二个參数開始传入。语法例如以下:

function func(p1,p2,p3){}

func.call(targetObject,p1,p2,p3)

apply方法与call方法实现同样的功能,不同的是。当传入參数时,全部的參数组成一个数组,作为apply的第二个參数传入,语法例如以下:

func.apply(targetObject,[p1,p2,p3])

同arguments结合使用时,apply方法更方便。

小结

  1. 搞清楚this的含义。是基础中的基础。
  2. 通过call、apply能够灵活绑定this的值。

Java程序猿的JavaScript学习笔记(3——this/call/apply)的更多相关文章

  1. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  2. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  3. Java程序猿的JavaScript学习笔记(1——理念)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  4. Java程序猿的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. Java程序猿的JavaScript学习笔记(6——面向对象模拟)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  8. Java程序猿的JavaScript学习笔记(5——prototype和Object内置方法)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  9. 《Java程序性能优化》学习笔记 设计优化

    豆瓣读书:http://book.douban.com/subject/19969386/ 第一章 Java性能调优概述 1.性能的参考指标 执行时间: CPU时间: 内存分配: 磁盘吞吐量: 网络吞 ...

随机推荐

  1. ODB 短板

    首先是不支持联合主键,而且没有CHECK约束.UNIQUE约束,这是官方都承认的. 虽然提供了延迟加载(lazyload)来改善效率,不过使用起来不方便 查询不灵活,只能在WHERE之后的部分设定查询 ...

  2. LINQ TO SQL 常用语法

    LINQ To SQL中IN的用法   IN: C# var result = from s1 in context.Customers where (new string[] { "UK& ...

  3. UBUNTU 下如何升级 gcc, g++

    正如大家所知道的GCC并不支持"make uninstall". 一种推荐安装方式就是把GCC 安装在你自己指定的一个路径,当你不须要某个GCC版本号的时候你仅仅须要移除相应版本号 ...

  4. [SQL基础教程] 4-1 数据的插入(INSERT)

    [SQL基础教程] C4 数据更新 4-1 数据的插入(INSERT) INSERT INSERT INTO <表名>(列1,列2...) VALUES(值1,值2...); 清单 用() ...

  5. .NET Core installation guide

      .NET Core installation guide 1.Download Visual Studio 2015 Make sure you have Visual Studio 2015 U ...

  6. ERROR 1698 (28000): Access denied for user &#39;root&#39;@&#39;localhost&#39;

    Some systems like Ubuntu, mysql is using by default the UNIX auth_socket plugin. Basically means tha ...

  7. 数据库相关--net start mysql 服务无法启动(win7系统)解决

    系统:win7 旗舰版 64位 MySQL:8.0.11 家里台式机上不久之前安装了MySQL,一段时间没碰过后,突然启动不了了(我有一头小毛驴,我从来也不骑,有一天我心血来潮骑它去赶集) 先是在系统 ...

  8. k8s(5)-拓展服务

    在之前我们创建了一个部署,然后通过服务公开它.部署只创建了一个Pod来运行我们的应用程序.当流量增加时,我们需要扩展应用程序以满足用户需求. 通过更改部署中的副本数来完成扩展. 1. 拓展部署 这里将 ...

  9. 一篇你看了就懂的DNS详解

    DNS(Domain Name System,域名系统),万维网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住IP. 通过域名,最终得到该域名对应的IP地址 ...

  10. redis + Tomcat 8 的session共享解决

    如果英文不错的看,建议直接看官网吧,官网写的挺清楚.下面的内容是转载的一篇文章,自己补充了一些,供大家参考,也欢迎大家一起讨论 官方截止到2015-10-12前是不支持Tomcat8的,详情见官网:h ...