JavaScript复习——this

this

this 在面向对象编程中十分常见。JavaScript 中的 thisJava 中的 this 有所不同,Java 中的 this 依赖于函数的声明,而在 JavaScriptthis 则依赖于函数的执行,因此 JavaScript中的 this 常被称为调用上下文

看下面代码,问函数里面的 this等于什么?

function jikezhuan () {
    console.log(this);
}

这里的 this 现在并不等于 window ,因为它可能等于包括 window 在内的许多值。如开头所述,this 依赖于函数的执行,目前函数并未执行 this 的值是未知的。

那么,接下来看看它有哪几种执行方式:

// 作为函数进行调用

function jikezhuan () {
    console.log( this );
}
jikezhuan();

jikezhuan1 = jikezhuan;
jikezhuan1();

两次输出都是 Window 对象。因为这两函数在执行时,其上下文是全局。

.

// 作为方法进行调用

var jike = {name: "jikezhuan"};

jike.skill = function () {
   console.log(this.name);
}

jike.skill(); // jikezhuan

通过 jike 对象的 skill 属性来调用函数,此时是作为 jike 的一个方法来调用的,该函数的上下文是 jike, 即 this 指向 jike 对象。

.

//作为构造器进行调用

function Jike() {
   this.skill = function() { return this }; 
}

var jike1 = new Jike();
var jike2 = new Jike();

if (jike1.skill() === jike1) {
   console.log("this指向jike1");
}

if (jike2.skill() === jike2) {
   console.log("this指向jike2");
}

执行以上代码,在控制台会输出 this指向jike1this指向jike2 。 构造器 Jike 在函数的上下文对象上创建了一个 skill属性,该属性方法又返回了上下文自身。 在使用 new 关键字进行调用时,会创建一个空对象实例,并把该对象作为 this 参数传递给 new 后面的函数—— jike2

.

apply() 、call()

函数调用方式之间的主要差异是:作为 this 参数传递给执行函数的上下文对象之间的区别。作为方法进行调用,上下文是该方法的拥有者;作为全局函数进行调用,其上下文是 window(也即该函数是 window 的一个方法);作为构造函数进行调用,其上下文对象是新创建的对象实例。当一个事件处理程序被调用时,该函数的上下文将被设置为绑定事件的对象。

有时会出现这样的需求,需要自由地指定函数的上下文,而 apply() 、call() 方法就能实现这样的功能。Javascript 的每个函数都有 apply() 和 call() 方法。

apply() 方法接收两个参数,一个是作为函数上下文的对象,另一个是作为函数参数所组成的数组。call() 方法使用方式的不同点在于,给函数传入的参数是一个参数列表,而不是单个数组。

//定义一个求和函数
function sum() {
    var result = 0;
    for (var i = 0; i < arguments.length; i++) { //arguments参数数组
        result += arguments[i];
    }
    this.result = result;
}

//创建两个测试对象
var test1 = {},
    test2 = {};

//使用apply()、call()方法调用函数
sum.apply(test1, [1,2,3,4]);
sum.call(test2, 5, 6, 7);

console.log("test1.result", test1.result); //10
console.log("test2.result", test2.result); //18

arguments 对象

arguments 保存着函数的参数。

arguments 是一个对应于传递给函数的参数的类数组对象。它类似于Array,但除了length属性和索引元素之外没有任何Array属性。arguments对象是所有(非箭头)函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。

// 求和函数
function add () {
    let sum = 0
    for (let i = 0; i < arguments.length; i++) {
        sum = sum + arguments[i]
    }
    return sum
}
add(1,2,3,4,5)

arguments.callee

arguments 对象上有一个名为 callee 的属性,其属性值为正在被执行的函数。先看一个例子,就知道 arguments.callee 的应用场景了。

现需用递归求1到n的和:

// 递归求和
// 求1~100的和
function sum (n) {
    if (n > 1) {
        return n + sum(n-1)
    } else {
        return 1
    }
}
sum(100)

增加难度,用匿名函数递归求1到n的和:

// 匿名函数 递归求和
// 求1~100的和
(function (n) {
    if (n > 1) {
        return n + arguments.callee(n-1)
    } else {
        return 1
    }
}) (100)
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,919评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,567评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,316评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,294评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,318评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,245评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,120评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,964评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,376评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,592评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,764评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,460评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,070评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,697评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,846评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,819评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,665评论 2 354

推荐阅读更多精彩内容

  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,560评论 0 5
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,124评论 0 21
  • 1.概念 在JavaScript中,this 是指当前函数中正在执行的上下文环境,因为这门语言拥有四种不同的函数调...
    BluesCurry阅读 1,129评论 0 2
  • 1. this之谜 在JavaScript中,this是当前执行函数的上下文。因为JavaScript有4种不同的...
    百里少龙阅读 996评论 0 3
  • 文/章暲 金鱼死了,带着她引以为傲的美丽和着玻璃碎片一起掉入了垃圾桶,永远不会再醒来。 曾经,从几十个兄弟姐...
    计量青年杂志社阅读 542评论 2 6