javascript基础：this关键字

LeoHsiun 发布于2019-08-19 18:20 / 1617人阅读

摘要：它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用类似的还有。总结关键字就是，谁调用我，我就指向谁。注意由于已经被定义为函数内的一个变量。因此通过关键字定义或者将声明为一个形式参数，都将导致原生的不会被创建。

题目

封装函数 f，使 f 的 this 指向指定的对象。

输入例子

bindThis(function(a, b) {
    return this.test + a + b；
}, {test: 1})(2, 3)；

输出例子

分析 题目拆解

该题目的要求是：封装一个函数bindThis，该函数有两个参数，第一个参数是一个内部有使用this指针的函数f，第二个参数是一个对象obj，执行bindThis之后，返回一个函数，该函数里面的this就被绑定到obj上面。。。好吧，我承认我刚看到这个时，也很晕，但是如果我把它写成下面的样子，是不是就感觉好多了呢？

function f(a, b) {
    return this.test + a + b；
}

function bindThis(f, obj) {
    //你实现的部分
}

//执行函数
var a = bindThis(f,{test:1});
a(2,3);

什么是this

this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用(类似的还有arguments)。具体的大家可以看看阮一峰的Javascript的this用法
和变量不同，关键字this没有作用域的限制，嵌套的函数不会从调用它的函数中继承this。
简单的将this的指向分为四种情况：

函数调用

这是函数的最通常用法，属于全局性调用，其this的值不是全局对象Global（非严格模式下）就是undefined（严格模式下）。

对象方法调用

函数还可以作为某个对象的方法调用，这时this就指这个上级对象.

构造函数调用

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。

bind apply call

apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。bind,call类似。

总结：this关键字就是，谁调用我，我就指向谁。

解决方法

首先，看到this的绑定这几个字，你是不想条件反射的想起了javascript的三剑客:bind apply call?

bind apply call的区别

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的，换句话说，就是为了改变函数体内部 this 的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

相同点：

都可以为函数绑定this。

不同点：

call和apply基本的区别：参数不同。apply() 接收两个参数，第一个是绑定 this 的值，第二个是一个参数数组。而 call() 呢，它的第一个参数也是绑定给 this 的值，但是后面接受的是不定参数，而不再是一个数组，也就是说你可以像平时给函数传参那样把这些参数一个一个传递。

bind的区别：创建一个新的函数。具体的可以看看这篇文章理解 Javascript 的 Function.prototype.bind

解决方法一：使用bind()

下面的例子是其中一个解决方法，同时也说明了bind()方法是创建了一个新的函数。

function f(a, b) {
    return this.test + a + b;
}

function bindThis(f, obj) {
    //你实现的部分
    return f.bind(obj);
}

//执行函数
var a = bindThis(f,{test:1});
console.log(a(2,3));
console.log(f(2,3));

输出结果：

6
NaN

解决方法二：使用apply()

function bindThis(f, obj) {
    //你实现的部分
    return function () {
        return f.apply(obj, arguments);
    };
}

这里使用一个函数包装了一下apply方法，然后返回该函数。

arguments是JavaScript 中每个函数内都能访问一个特别变量 arguments。这个变量维护着所有传递到这个函数中的参数列表。

注意: 由于 arguments 已经被定义为函数内的一个变量。因此通过 var 关键字定义 arguments 或者将 arguments 声明为一个形式参数，都将导致原生的 arguments 不会被创建。

arguments 变量不是一个数组（Array）。尽管在语法上它有数组相关的属性 length，但它不从 Array.prototype 继承，实际上它是一个对象（Object）。

解决方法三：使用call()

和apply()类似，仅参数的传入方式不同。

function bindThis(f, obj) {
    //你实现的部分
    return function (a,b) {
        return f.call(obj, a,b);
    };
}

总结

该题目主要考察的是this关键字及改变this指向的方法，再下才疏学浅，只能找到这几个方法了，但是鉴于javascript这门语言的灵活性，我老感觉应该是还有其他的方法的，希望各位知道了能够不吝赐教。

混合云 idc机房托管 jsp关键字this javascript的this javaScript中的this javascript中this详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79474.html

JavaScript基础心法——this

摘要：原文地址基础心法欢迎。作为一个构造函数被绑定到正在构造的新对象。通过构造函数创建一个对象其实执行这样几个步骤创建新对象将指向这个对象给对象赋值属性方法返回所以就是指向创建的这个对象上。原文地址：JavaScript基础心法——this 欢迎star。如果有错误的地方欢迎指正。看看这个有着深不可测的魔力的this到底是个什么玩意儿 ~ 什么是this 在传统面向对象的语言中，比如...

hover_lew 2019-08-22 11:11 评论0 收藏0
快速掌握JavaScript面试基础知识(二)

摘要：第一部分请点击快速掌握面试基础知识一闭包闭包由一个函数以及该函数定义是所在的环境组成。当匿名函数执行的时候，的值为。这个问题可以改用后面会介绍方法来解决，通过对每一个匿名函数构建独立的外部作用域来实现。译者按：总结了大量JavaScript基本知识点，很有用！原文: The Definitive JavaScript Handbook for your next develope...

fyber 2019-08-26 11:43 评论0 收藏0
快速掌握JavaScript面试基础知识(三)

摘要：第一部分请点击快速掌握面试基础知识一关键字如果使用关键字来调用函数式很特别的形式。该对象默认包含了指向原构造函数的属性。接下来通过例子来帮助理解属性包含了构造函数以及构造函数中在上定义的属性。也就是说，的回调函数后执行。译者按：总结了大量JavaScript基本知识点，很有用！原文: The Definitive JavaScript Handbook for your next...

qieangel2013 2019-08-26 11:43 评论0 收藏0
#yyds干货盘点# 前端基础知识面试集锦3

摘要：当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体如何实现继承构造继承原型继承实例继承拷贝继承原型机制或和方法去实现较简单，建议使用构造函数与原型混合方式。它是基于的一个子集。 JavaScript介绍js的基本数据类型。Undefined、Null、Boolean、Number、Stri...

番茄西红柿 2021-11-22 15:29 评论0 收藏2637
Javascript基础知识（一）

摘要：它可以接收两个参数，表示要查找的子字符串，表示查找的开始位置，省略的话则从开始位置进行检索。它会返回第一个匹配的子字符串的起始位置，如果没有匹配的，则返回。返回一个布尔值，表示指定的对象是否在本对象的原型链中。前言前端开发最基本的就是HTML + CSS + JS了，刚入行时听到的介绍就是，写页面亦如造房子，HTML为搭户型，CSS是房屋装饰，JS则好比是水电安装，是最后的功能了。...

MrZONT 2019-08-23 16:30 评论0 收藏0