Js 中 this 的理解
 
this 是啥 ?
 
this是 JavaScript 语言的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用; 随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是调用函数的那个对象。
先搞明白一个很重要的概念 —— this的值是在执行的时候才能确认,定义的时候不能确认!为什么呢 —— 因为this是执行上下文环境的一部分,而执行上下文需要在代码执行之前确定,而不是定义的时候。查看执行上下文
 
我的理解:this 总是指向类的当前实例,this不能赋值;也就是说 this 不能脱离 类/对象 ,总结下来,this的指向大致分为4种情况
 
1.纯粹的函数调用,this指向全局对象window.
  1. var x = 1;
  2. function test() {
  3. console.log(this.x);
  4. }
  5. test(); //
2.严格模式下"use strict",指向 undefined.
  1. "use strict";
  2. var x = 1;
  3. function test() {
  4. console.log(this.x);
  5. }
  6. test(); // undefined
3.对象的方法里调用,this指向调用该方法的对象
  1. function test() {
  2. console.log(this.x);
  3. }
  4. var obj = {};
  5. obj.x = 1;
  6. obj.m = test;
  7.  
  8. obj.m(); //
4.构造函数里的this,指向创建出来的实例,这里的 全局 x 始终是 1 ;说明了 this 指向构造函数创建的实例。
  1. var x = 1;
  2. function test() {
  3.  this.x = 2;
  4. }
  5. var obj = new test();
  6. obj.x //
  7. x //
 
那么this的指向能不能更改呢 ?
答案是当然可以的,call / apply / bind ;我们都知道call apply bind都可以改变函数调用this的指向。

call跟apply的用法几乎一样,唯一的不同就是传递的参数不同,call只能一个参数一个参数的传入。
apply则只支持传入一个数组,哪怕是一个参数也要是数组形式。最终调用函数时候这个数组会拆成一个个参数分别传入。
我的理解:a.call(b,arg1,arg2..) 就是a对象的方法应用到b对象上 ; 调用call的对象必须是一个函数对象,因为 call这个方法是在Function的prototype里的,因此 a 对象的共有属性也会应用到 b 对象上;(所谓的继承,apply同理)。我们实践一下:
 
实践一下 call / apply:
  1. var x = 0;
  2. function test() {
  3.  console.log(this.x);
  4. }
  5. var obj = {};
  6. obj.x = 1;
  7. obj.m = test;
  8. //apply 的方式
  9. obj.m.apply() //
  10. obj.m.apply(obj); //
  11. //call 的方式
  12. obj.m.call() //
  13. obj.m.call(obj); //
至于bind方法,他是直接改变这个函数的this指向并且返回一个新的函数,之后再次调用这个函数的时候this都是指向bind绑定的第一个参数。
使用:fun.bind(thisFun);
  1. var a = {
  2. b: function() {
  3. var func = function() {
  4. console.log(this.c);
  5. }
  6. func.bind(this)();
  7. },
  8. c: 'hello'
  9. }
  10. a.b(); // hello
  11. console.log(a.c); // hello
 

Js 中的 this的更多相关文章

  1. 5.0 JS中引用类型介绍

    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...

  2. 【repost】JS中的异常处理方法分享

    我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...

  3. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

  4. js中几种实用的跨域方法原理详解(转)

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  5. 关于js中的this

    关于js中的this this是javascript中一个很特别的关键字,也是一种很复杂的机制,学习this的第一步就是要明白this既不指向函数自身也不指向函数的词法作用域,this实际上是函数被调 ...

  6. 表值函数与JS中split()的联系

    在公司用云平台做开发就是麻烦 ,做了很多功能或者有些收获,都没办法写博客,结果回家了自己要把大脑里面记住的写出来. split()这个函数我们并不陌生,但是当前台有许多字段然后随意勾选后的这些参数传递 ...

  7. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  8. 在node.js中,使用基于ORM架构的Sequelize,操作mysql数据库之增删改查

    Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...

  9. 分析js中的constructor 和prototype

    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...

  10. 如何在Node.js中合并两个复杂对象

    通常情况下,在Node.js中我们可以通过underscore的extend或者lodash的merge来合并两个对象,但是对于像下面这种复杂的对象,要如何来应对呢? 例如我有以下两个object: ...

随机推荐

  1. centos文件/文件夹操作-检查磁盘、内存、cpu使用情况-vi操作命令

    Part1:CentOS文件/文件夹操作 1.新建文件夹 即创建目录 mkdir 文件名 新建一个名为test的文件夹在home下 vi source1 mkdir /home/test 注意:当创建 ...

  2. 读写csv文件——考虑各种异常场景,源码

    CSV是以逗号间隔的文本文件,其文件以纯文本形式存储表格数据(数字和文本).在JAVA中可以通过输出文件流的方式将数据写入CSV文件,通过BufferedReader类去读该路径中的文件,使用read ...

  3. UVA 455(最小周期)

    最小周期可以用%枚举 #include <iostream> #include <string> #include <cstring> #include <c ...

  4. MySQL B+树索引和哈希索引的区别(转 JD二面)

    导读 在MySQL里常用的索引数据结构有B+树索引和哈希索引两种,我们来看下这两种索引数据结构的区别及其不同的应用建议. 二者区别 备注:先说下,在MySQL文档里,实际上是把B+树索引写成了BTRE ...

  5. css设置背景模糊

    使用filter属性来设置模糊值 效果: css样式: <style type="text/css"> .cover { width: 600px; height: 3 ...

  6. asp.net中label控件设置字体大小

    //后台修改label控件字体 protected void Button1_Click(object sender, EventArgs e) {   this.Label1.Font.Size = ...

  7. 关于webpack 配置文件找不到

    运行命令  npm run eject 将配置文件解压出来 如果运行这个命令有错的时候,很可能与 git 有关 这时候,打开项目文件夹,显示所有隐藏的文件夹(工具),如果显示了git 的文件夹  删掉 ...

  8. Leetcode算法比赛---- Lexicographical Numbers

    问题描述 Given an integer n, return 1 - n in lexicographical order. For example, given 13, return: [1,10 ...

  9. .NET开源工作流RoadFlow-流程设计-流程步骤设置-事件设置

    事件设置是设置当前步骤在提交前后或退回前后要执行的一些操作(该事件为服务器事件). 事件格式为:dll名称.命名空间名称.类名.方法名,这里不需要写括号和参数,处理时会自动带上当前流程实例的相关参数. ...

  10. 自定义动画(仿Win10加载动画)

    一.源代码 源代码及demo 二.背景 先看看Win10的加载动画(找了很久才找到): CPA推广甲爪广告联盟满30日结 [点击进入] 甲爪广告联盟,提供各类高单价CPA广告 单价高 收益好 日付广告 ...