资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/js基本操作-this理解

js基本操作-this理解

Steven / 2144人阅读

摘要：基本操作理解写在前面在面向对象的语言中，关键字的含义是明确且具体的，即指代当前对象。一般在编译期确定下来，或称为编译期绑定。全局范围内当在全部范围内使用，它将会指向全局对象。输出浏览器中运行的脚本，这个全局对象是。

js基本操作-this理解 写在前面

在面向对象的语言中，this关键字的含义是明确且具体的，即指代当前对象。一般在编译期确定下来，或称为编译期绑定。而在 JavaScript中，this是动态绑定，或称为运行期绑定的，这就导致JavaScript中的this关键字有能力具备多重含义，带来灵活性的同时，也为初学者带来不少困惑。

当然，还是老话，所有的方法都来自网上，学到了才是自己的！！

然后，写在前面，带上我们可爱的小伙伴。废话不多说，下面我们开始看起吧！

基本介绍

文章主要是对js的this进行简单的说明和介绍，顺带会添加一些代码，没办法，语言能力有限，说明不了的只能直接上代码了。

关于JS中的this，这是很多前端面试必考的题目，有时候在网上看到这些题目,看着感觉还不错，做起来非常的酸爽！而在实际的开发中，也会遇到各种使用this的问题。当然，在刚开始的时候，我们可能会非常的困惑，这个地方，为什么要这样使用this尼？有时候不明白为什么不直接使用this,而要把this作为参数传入。

下面，我将以我的理解的方式对this的理解和使用，做一个简单的介绍。

this的理解

接单的理解：this指的是引用它的对象。

当然，也可以套用轮子哥的一个解释:

</>复制代码 
  1. this在js的函数里面只是一个参数，是通过Fuck.Shit(Bitches)这种语法来传递的，点号前面的表达式就算this。不要想太多。

一般来说，阐述JavaScript中this的运作机制，下面一句话诠释的非常贴切。

</>复制代码 
  1. When a function of an object was called, the object will be passed into the execution context as this value

简而言之，就是function的this永远指向调用它的对象。而鉴于JS所谓的“万物皆对象”，这个this因此可以是任何物件，比如Global对象

JavaScript有一套完全不同于其它语言的对this的处理机制。 下面，将会在不同的情况下，this指向的各不相同。

1.全局范围内

当在全部范围内使用 this，它将会指向全局对象。

</>复制代码 
  1. this;
  2. console.log(this);//输出window
</>复制代码 
  1. 浏览器中运行的 JavaScript 脚本，这个全局对象是 window。
2.函数调用

这里this也会指向全局对象。

</>复制代码 
  1. function foo(){
  2.     console.log(this);
  3. }
  4. foo();//输出window
3.方法调用

这个例子中，this 指向调用方法的对象。

</>复制代码 
  1. var test = {
  2.     foo : function(){
  3.         console.log(this);
  4.     }
  5. }
  6. test.foo();//输出test对象
4.调用构造函数

如果函数倾向于和 new 关键词一块使用，则我们称这个函数是 构造函数。 在函数内部，this 指向新创建的对象。

</>复制代码 
  1. function foo(name,age){
  2.     this.name = name;
  3.     this.age = age;
  4.     console.log(this);
  5. }
  6. new foo("yu",23);//输出新创建的对象 foo {name: "yu", age: 23}
5.显式的设置

当使用Function.prototype上的call或者apply方法时，函数内的this将会被显式设置为函数调用的第一个参数。

因此函数调用的规则在上例中已经不适用了，在foo 函数内 this 被设置成了 bar。

</>复制代码 
  1. function foo(a, b, c) {
  2.     this.a = a;
  3.     this.b = b;
  4.     this.c = c;
  5. }
  6. var bar = {};
  7. foo.apply(bar, [1, 2, 3]); // 数组将会被扩展，bar被修改为Object {a: 1, b: 2, c: 3}
  8. foo.call(bar, 4, 4, 4); // 传递到foo的参数是：a = 4, b = 4, c = 4; bar被修改为Object {a: 4, b: 4, c: 4}

这里使用了apply和call方法，用于修改this指针的指向。会在后面的文章中详细说明。

使用用例 
</>复制代码 
  1. 题目描述：  
    实现函数 callIt，调用之后满足如下条件  
    1、返回的结果为调用 fn 之后的结果  
    2、fn 的调用参数为 callIt 的第一个参数之后的全部参数

输入例子:

</>复制代码 
  1. var a = 1; 
  2. var b = 2; 
  3. var test = function (first, second) { 
  4.     return first === a && second === b;
  5. }; 
  6. callIt(test, a, b);
</>复制代码 
  1. 输出例子: true
  2. 代码实现
</>复制代码 
  1. //方法一
  2. function callIt(fn) {
  3.     var arr = [].slice.call(arguments,1);
  4.     return fn.call(null, arr[0], arr[1]);//因为只有两个参数，这里直接使用两个了
  5.     // 
  6. }
  7. //方法二
  8. function callIt(fn) {
  9.     //Array.prototype.slice.call的作用是将arguments伪对象转换成数组对象。
  10.     //下面的目的是，将arguments转化为数组后，截取第一个元素之后的所有元素
  11.     return fn.apply(this,[].slice.call(arguments,1));//这里用[]代替Array.prototype，也可以使用下面的。
  12.     //return fn.apply(this,Array.prototype.slice.call(arguments,1));
  13. }
</>复制代码 
  1. 代码说明：
  2. 首先，arguments不是真正的数组，不能直接使用slice方法，所以才会用Array对象原型链上面的slice方法去处理arguments，返回的自然是一个数组。
  3. 另外，给apply/call传递null，“”空字符串，默认都是this
其他说明 
</>复制代码 
  1. 以上的所有方法，都来自网上。
  2. 所有的方法，都必须脚踏实地，在具体应用场景下去分析、去选择，我们应该按照具体的情况，来选择方法。
  3. 因为浏览器的多样性，前端的应用场景经常很复杂，性能优化充满挑战，也充满机遇。
  4. 学会了才是自己的，知道会用会写，才是我们最终的目标。
参考文档 
</>复制代码 
  1. javascript秘密花园
  2. 如何理解 JavaScript 中的 this 关键字？
  3. Javascript的this用法
  4. (编程题)使用 apply 调用函数
云服务器 GPU云服务器 js中的this js里面的this js中的this机制 js中的this与html

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

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

相关文章

  • JavaScript系列（四） - 收藏集 - 掘金

    摘要：函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言 面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言，然而，近几年，函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此，...

    cfanr 评论0 收藏0

  • JavaScript深入浅出

    摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。 怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

    blair 评论0 收藏0

  • 理解对象和对象的描述特性

    摘要：面向对象理解对象和对象的描述特性面向对象面向对象的语言都有一个特性都有类的概念。默认值是使用对象字面量的方式为对象添加的属性，其的值是，的值是指定的值。同数据属性同数据属性读取的时候调用函数。 JavaScript面向对象OOM 1（理解对象和对象的描述特性） Date: Updated At Oct 31, 2018 | JavaScript | 面向对象 | Author: Zhe...

    Rocture 评论0 收藏0

  • 理解对象和对象的描述特性

    摘要：面向对象理解对象和对象的描述特性面向对象面向对象的语言都有一个特性都有类的概念。默认值是使用对象字面量的方式为对象添加的属性，其的值是，的值是指定的值。同数据属性同数据属性读取的时候调用函数。 JavaScript面向对象OOM 1（理解对象和对象的描述特性） Date: Updated At Oct 31, 2018 | JavaScript | 面向对象 | Author: Zhe...

    Cobub 评论0 收藏0

发表评论

登陆后可评论

0条评论

Steven

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<