JavaScript中对this深入了解

April 发布于2019-08-21 17:34 / 3121人阅读

摘要：但是有一个总的原则，那就是指的是调用函数的那个对象。作为构造函数调用如果在一个函数前面带上来调用，那么背地里将会创建一个链接到该函数的成员的新对象，同时会被绑定到那个新对象上。使用或调用方法让我们构建一个参数数组传递给调用函数。

让我们深入探索一下this的具体用法 只有了解this用法才算真正入门了

首先来聊聊：what"this?
this是Javascript语言的一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是调用函数的那个对象。
This 被分为三种情况：全局对象、当前对象或者任意对象;判断处于那种情况，这完全取决于函数的调用方式
JavaScript 中函数的调用有以下几种方式：

作为函数调用

作为对象方法调用

作为构造函数调用

使用 apply 或 call 调用

“我要问的是this！你咋给我讲起函数调用来了？要晕了！！！”

别急！且听我慢慢道来:

作为函数调用

这是我们最常用的方法，这种调用方式属于全局调用！以此模式调用函数时，
this被绑定到全局对象。（什么？全局变量，难道它是一辆公交车？）

先来个干货

  function example(){ 
    this.n = "hello world !"; 　　
    console.log(this.n); 
    console.log(this); 　
  } 　　
    example();

调用 example(); 时，输出了 ‘hello world !’ 还有 Window;
什么，还不信？行，再来个更猛的

var n = "hello world !"; 　
function example(){ 
  this.n = 0;
} 
example(); 
console.log(n);

果然是一辆公交车！！！

作为对象方法调用

当一个函数被保存为对象的一个属性时，我们称它为一个方法。当一个方法被调用，this被绑定到该对象。

var name="A";
var student = { 
  name:"C", 
  showName:function(){ 
    console.log(this.name); 
  } 
} 
  dogs.showName(); //输出 C

  var boyName = student.showName(); 

  boyName(); //输出 A

当执行 dogs.showName(); 时输出 C ，说明这个时候this指向的是student这个对象的；当我们把student.showName();赋给boyName时，showName() 是做什么用的，很显然，输出它函数的执行环境所指向对象的name，而此时boyName 变量相当于 Window 对象的一个属性，因此 boyName() 执行的时候相当于 window.boyName(),所以 this 关键字指向 window;所以就会输出 A 。

作为构造函数调用

如果在一个函数前面带上new来调用，那么背地里将会创建一个链接到该函数的prototype成员的新对象，同时this会被绑定到那个新对象上。

  function example(){ 　　
    　this.n = "hello world !"; 　
  } 　
  　var other = new example(); 　
  　console.log(other.n);

从运行结果可以看出：
我们为example这个函数new(构造)了一个新的对象 other,那么 this 就会指向 other 这个对象，所以就会输出 ‘hello world !’。

使用 apply 或 call 调用

apply 方法让我们构建一个参数数组传递给调用函数。他允许我们选择this值。
它应用某对象的一个方法，用另一个对象替换当前对象。

var n = "hello world!"; 
  function example(){ 　　　
    console.log(this.n); 
  } 　　
  var o={}; 　　
  o.n = "hey~"; 　
  o.m = example; 　
  o.m.apply(); //输出 "hello world!"

当apply()的参数为空时，就是没有对象去替换掉当前的对象，所以默认调用全局对象。
因此，这时会输出’hello world!’，证明this指的是全局对象。

当我们给apply()指定一个对象时：

  var n = "hello world!"; 
  function example(){ 　　
    　console.log(this.n); 
  } 　
  var o={}; 　
  o.n = "hey~"; 　　
  o.m = example; 　
  o.m.apply(o); //  输出"hey~"

此时输出了’hey~’,说明对象替换成功，this 指向了 o 这个对象。

以上介绍的就是JavaScript中this在不同情况下的含义。虽然这只是很小的一部分，但对于理解函数却作用很大。作为一个入门不久的我，这只是我最近一些小小的理解，希望能帮助那些想学习的小白！
也希望大佬们能多多包涵，毕竟知识有限写的肯定有很多缺陷!部分借鉴网络!
溜了溜了！

超融合服务器云服务器深入了解javascript 深入了解php项目如何深入了解linux javascript的this

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

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

ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
React高阶组件

摘要：结语高阶函数对于初学者来说可能不太好理解，但当你深入其中，了解其中的原理之后，我们可以使用高阶函数来完成很多的工作。前段时间在工作中写Hybrid页面时遇到了这样的一个场景，公司需要一系列的活动组件，在每个组件注册的时候都需要调用App端提供的一个接口。一开始也考虑了几种方式，包括mixin、组件继承以及react高阶组件。但经过了种种衡量，最后选择使用了高阶组件的做法。 1、Mix...

ThinkSNS 2019-08-22 15:47 评论0 收藏0
理解JavaScript的核心知识点：This

摘要：关键字计算为当前执行上下文的属性的值。毫无疑问它将指向了这个前置的对象。构造函数也是同理。严格模式无论调用位置，只取显式给定的上下文绑定的，通过方法传入的第一参数，否则是。其实并不属于特殊规则，是由于各种事件监听定义方式本身造成的。 this 是 JavaScript 中非常重要且使用最广的一个关键字，它的值指向了一个对象的引用。这个引用的结果非常容易引起开发者的误判，所以必须对这个关...

TerryCai 2019-08-23 17:00 评论0 收藏0
深入了解js对象

摘要：通过创建的对象运算符创建并初始化一个新对象，关键字后跟随一个函数调用，这里的函数称作构造函数，构造函数用以初始化一个新创建的对象。该文章以收录：《JavaScript深入探索之路》前言对象是Javascript 的基本类型。对象是一种复合值，它将很多值（原始值或者其他对象）聚合在一起，可通过名字访问这些值。对象也可看做是属性的无序集合。每个属性都是一个名/值对。JavaSc...

cheukyin 2019-08-21 17:42 评论0 收藏0
JavaScript是如何工作的：深入类和继承内部原理+Babel和 TypeScript 之间转换

摘要：下面是用实现转成抽象语法树如下还支持继承以下是转换结果最终的结果还是代码，其中包含库中的一些函数。可以使用新的易于使用的类定义，但是它仍然会创建构造函数和分配原型。这是专门探索 JavaScript 及其所构建的组件的系列文章的第 15 篇。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！如果你错过了前面的章节，可以在这里找到它们： JavaScript 是...

PrototypeZ 2019-08-23 14:54 评论0 收藏0