JavaScript深入刨析this的指向以及如何修改指向

目录
  • this
    • 方法中
    • 对象中
    • 隐藏的this
    • 严格模式
    • 可以改变this指向

this

老规矩先看代码：

方法中

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

对象中

Person={
  name:"张三",
  eat:function(){
      console.log(this)
  }
}

在方法中，this表示该方法所属的对象。因为第一个是window上的方法，所以打印了window，而eat方法是Person方法，所以打印除了对象Person。

所以可以看出单独在控制台使用this， 表示全局对象。

隐藏的this

在对象，可以提前声明一个一个：

var Person1={
    name:"张三",
    age:18
}
var Person2={
    name:"李四",
    age:19
}

这样写会很麻烦，所以可以借鉴一下java类的概念，可以这样：

var Person=function(name,age){
    this.name=name,
    this.age=age

}
var Person1=new Person("张三",18);
var Person2=new Person("李四",19);

其实在new的时候隐藏了一个return this，如果不使用new的话，发现其没有返回这个新建的对象。

那么现在补全一下看：

var Person=function(name,age){
    this.name=name,
    this.age=age
    return this;
}
var Person1=new Person("张三",18);
var Person2=new Person("李四",19);

这样的话，甚至可以伪造一个this的效果：

var Person=function(name,age){
    var that={};
    that.name=name,
    that.age=age
    return that;
}
var Person1=new Person("张三",18);
var Person2=new Person("李四",19);

严格模式

this在严格模式和非严格模式下有些神奇的情况

function test() {
  return this;
}

# 如果js前面添加"use strict" 代表是严格模式
"use strict";
function test() {
  return this;
}

这个可以看出在非严格模式下函数中，函数的所属者默认绑定到 this 上。所以可以打印出全局，但是严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。

可以改变this指向

先看代码

var Person=function(name,age){
    this.name=name,
    this.age=age,
    this.fun=function(){
         console.log("打印",this.name);
        }
}
var Person1=new Person("张三",18);
var Person2=new Person("李四",19);

可以看出this指向的window中的a的值而不是方法test中的值，但是有些关键字是可以修改指向的。

可以看出方法前的对象是谁，调用的this就是谁，但是可以修改的比如使用关键字 call ,apply ,bind

看上面的话，可以看出call和apply两个很像，而bind不会立即执行函数，需要带（）执行。

不过如果带上参数的话，会发现call和apply还是不同的，但是其里面都必须是对象才行，毕竟this这个指向就是对象

关键字 直接调用方法 参数
call 会自动运行使用的方法 都可以带参数格式如下：obj1.obj1Fun.call( obj2, 参数1, 参数1 ………………)；
apply 会自动运行使用的方法 都可以带参数格式如下：obj1.obj1Fun.apply( [ obj2, 参数1, 参数1 ………………])； 对比call的参数其参数用 [ ] 包住
bind 不会自动运行使用的方法，需要后面+（），进行调用 都可以带参数格式如下：都可以带参数格式如下：obj1.obj1Fun.bind( [ obj2, 参数1, 参数1 ………………])（）； 对比apply的参数是一样的，只不过其需要后面+（）才能调用

到此这篇关于JavaScript深入刨析this的指向以及如何修改指向的文章就介绍到这了,更多相关JavaScript this指向内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript 中this指向问题案例详解

    总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数 全局环境 无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window

  • JavaScript中的this指向问题详解

    JavaScript中的this指向问题详解

    前言 相信我,只要记住本文的 7️⃣ 步口诀,就能彻底掌握 JS 中的 this 指向. 先念口诀:箭头函数.new.bind.apply 和 call.欧比届点(obj.).直接调用.不在函数里. 按照口诀的顺序,只要满足前面某个场景,就可以确定 this 指向了. 接下来按照口诀顺序对它们进行详解,文中示例代码都运行在 Chrome 的 Console 控制台中. 文末有精心准备的练习题,用于检验学习成果,别忘了试试~ 1. 箭头函数 箭头函数排在第一个是因为它的 this 不会被改变,所以

  • JavaScript中的this指向和自定义属性详解

    目录 1.this关键字 2.自定义属性 3.综合案例1:tab选项卡的实现 附录 总结 1.this关键字 this指向的是当前元素 全局函数中的this指向window对象 代码中声明了一个全局函数,是属于浏览器窗口对象的,所以this表示的就是浏览器窗口对象window function fn() { consolo.log(this); } fn() 标签事件属性中的this指向window对象 如果将一个全局函数在一个标签属性中调用,如下: <button onclick="fn

  • JS 箭头函数的this指向详解

    箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承. 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误 无法使用arguments参数,如果要用的话就用rest 无法使用yield命令,所以箭头函数无法用作Generator函数 因为没有自己的this,所以没法通过bind.call.apply来改变this指向 但是这不代表箭头函数的this指向是静态的,我们可以通过改变它外层代码库的this指向来控制 箭头函数的this从外层代码

  • JS 里为什么会有 this

    目录 1.需求 2.方案 3.第一次改进 4.加糖 5.费解 6.存在问题 7.对象与函数 1.需求 假设我们有一个对象 var person = { name: 'Frank', age: 18, phone: '13812345678', sayHi: function(){ // 待补充 }, sayBye: function(){ // 待补充 } } 这个 person 对象有 name 和 age 属性,还有一个 sayHi 方法,现在的需求是: 调用 person.sayHi(..

  • JavaScript函数中this指向问题详解

    this关键字 哪个对象调用函数,函数里面的this指向哪个对象. **严格模式下:**在全局环境中,this指向的是undefined **非严格模式下:**在全局环境中,this指向的是window 全局定义的函数直接调用,this => window function fn(){ console.log(this); // 此时 this 指向 window } fn(); // 相当于 window.fn() 对象内部的函数调用,this => 调用者 var obj = { fn:f

  • Javascript中函数分类&this指向的实例详解

    Javascript中函数分类&this指向的实例详解

    JS中定义函数的三种方式 通过实例来说明吧 <script> //method1 function fn() { console.log('fn created '); } //method2 var fn2 = function () { console.log('fn2 created'); } //method3 var fn3 = new Function('test', 'console.log(test);'); fn3('fn3 test'); console.dir(fn3);

  • JavaScript this的原理以及指向详解

    怎么判断this指向? ①在全局环境中调用就指向window. ②作为对象的方法调用就指向该对象. ③作为构造函数调用就指向这个新创建的对象. ④可以使用apply,call,bind改变this指向. ⑤箭头函数中的this与定义时所处的上下文绑定,且不能被改变, 箭头函数this指向取决于它外层找到的离它最近的第一个非箭头函数的this. 怎么理解this原理? JavaScript语言学懂需要理解下面两种写法 var obj = { foo: function () {} }; var f

  • JavaScript深入刨析this的指向以及如何修改指向

    JavaScript深入刨析this的指向以及如何修改指向

    目录 this 方法中 对象中 隐藏的this 严格模式 可以改变this指向 this 老规矩先看代码: 方法中 function test(){ console.log(this); } 对象中 Person={ name:"张三", eat:function(){ console.log(this) } } 在方法中,this表示该方法所属的对象.因为第一个是window上的方法,所以打印了window,而eat方法是Person方法,所以打印除了对象Person. 所以可以看出

  • JavaScript 关于事件循环机制的刨析

    JavaScript 关于事件循环机制的刨析

    目录 前言: 一.事件循环和任务队列产生的原因: 二.事件循环机制: 三.任务队列: 3.1 任务队列的类型: 3.2 两者区别: 3.3 更细致的事件循环过程 四.强大的异步专家 process.nextTick() 4.1 process.nextTick()在何时调用? 前言: 这次主要整理一下自己对 Js事件循环机制,同步,异步任务,宏任务,微任务的理解,大概率暂时还有些偏差或者错误.如果有,十分欢迎各位纠正我的错误! 一.事件循环和任务队列产生的原因: 首先,JS是单线程,这样设计也是

  • Java集合框架之List ArrayList LinkedList使用详解刨析

    Java集合框架之List ArrayList LinkedList使用详解刨析

    目录 1. List 1.1 List 的常见方法 1.2 代码示例 2. ArrayList 2.1 介绍 2.2 ArrayList 的构造方法 2.3 ArrayList 底层数组的大小 3. LinkedList 3.1 介绍 3.2 LinkedList 的构造方法 4. 练习题 5. 扑克牌小游戏 1. List 1.1 List 的常见方法 方法 描述 boolean add(E e) 尾插 e void add(int index, E element) 将 e 插入到 inde

  • Java 十大排序算法之归并排序刨析

    目录 归并排序原理 归并排序API设计 归并排序代码实现 归并排序的时间复杂度分析 归并排序原理 1.尽可能的一组数据拆分成两个元素相等的子组,并对每一个子组继续拆分,直到拆分后的每个子组的元素个数是1为止. ⒉将相邻的两个子组进行合并成一个有序的大组. 3.不断的重复步骤2,直到最终只有一个组为止. 归并排序API设计 类名 Merge 构造方法 Merge():创建Merge对象 成员方法 1.public static void sort(Comparable[] a):对数组内的元素进行

  • Java 十大排序算法之堆排序刨析

    二叉堆是完全二叉树或者是近似完全二叉树. 二叉堆满足二个特性︰ 1．父结点的键值总是大于或等于(小于或等于)任何一个子节点的键值. 2．每个结点的左子树和右子树都是一个二叉堆(都是最大堆或最小堆). 任意节点的值都大于其子节点的值--大顶堆(最后输出从小到大排) 任意节点的值都小于其子节点的值---小顶堆(最后输出从大到小排) 堆排序步骤 1.堆化,反向调整使得每个子树都是大顶或者小顶堆(建堆) 2.按序输出元素∶把堆顶和最末元素对调,然后调整堆顶元素(排序) 堆排序代码实现(大顶堆) publ

  • C语言数据结构经典10大排序算法刨析

    C语言数据结构经典10大排序算法刨析

    1.冒泡排序 // 冒泡排序 #include <stdlib.h> #include <stdio.h> // 采用两层循环实现的方法. // 参数arr是待排序数组的首地址,len是数组元素的个数. void bubblesort1(int *arr,unsigned int len) { if (len<2) return; // 数组小于2个元素不需要排序. int ii; // 排序的趟数的计数器. int jj; // 每趟排序的元素位置计数器. int itmp

  • Java由浅入深刨析继承

    Java由浅入深刨析继承

    目录 继承 继承的介绍 生活中的继承 继承的好处 继承的格式 继承的demo 子类不能继承的内容 super与this关键字 构造器不能被继承 final修饰的类不能被继承 方法重写 介绍 使用场景与案例 @Override重写注解 注意事项 完结 茫茫人海千千万万,感谢这一秒你看到这里.希望我的面试题系列能对你的有所帮助!共勉! 愿你在未来的日子,保持热爱,奔赴山海! Java基础知识(继承) 继承 继承的介绍 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类.描述的是事

  • C语言树与二叉树基础全刨析

    C语言树与二叉树基础全刨析

    目录 一.树的概念和结构 1.1 树的概念 1.2 树的结构 & 相关名词解释 1.3 树的表示 1.4 树的应用 二.二叉树的概念 & 存储结构(重要) 2.1 二叉树的概念 2.2 特殊的二叉树 2.3 二叉树的性质 2.4 二叉树的存储结构 一.树的概念和结构 1.1 树的概念 树是一种非线性的数据结构,它是由 n(n>=0)个有限结点组成一个具有层次关系的集合.把它叫做树是因为它看起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的. 有一个特殊的结点,称为根结点,根节点没有前

  • C++深入刨析类与对象的使用

    C++深入刨析类与对象的使用

    目录 this指针 this指针存放在哪 nullptr与类 类的默认成员函数 构造函数 意义 析构函数 拷贝构造 运算符重载 this指针 现在给出一段代码,实现一个普通的日期 date 的打印: class date { public: void print() { cout << year<<' ' << month <<' '<< day << endl; } void init(int y, int m, int d) {

  • C语言深入刨析数据结构之栈与链栈的设计与应用

    C语言深入刨析数据结构之栈与链栈的设计与应用

    目录 一.栈的定义 二.栈的特点 三.栈的理解 四.链栈引入 五.链栈定义 六.链栈的结构体设计 七.链栈的基本操作 7.1链栈的初始化 7.2链栈判空 7.3链栈入栈 7.4链栈出栈 7.5取栈顶元素 八.总结 一.栈的定义 栈是限定仅在表尾进行插入和删除操作的数据结构(受到限制的线性表). 我们把允许插入和删除的一端称为栈顶,另一端称为栈底,不含任何元素为空栈. 二.栈的特点 后进先出 比如word,浏览器网页等一系列软件中,都有撤销的操作,就是利用栈的这种方式来实现的,可能不同软件的代码不

随机推荐