简单分析js中的this的原理

2024-10-09 11:50:18

很多人可能会有疑问,this到底是什么?为什么this的值变化多端?

首先我们来概括下this.

this是一个对象,一般存在于函数中,表示当前函数的执行上下文;

值得一提的是,当函数在执行后,this才有绑定的对象,函数未执行时,this没有内容

接下来我们看看在不同场景下的this的指向

1.函数默认执行 :此时this指向Window

 function fn(){
  console.log(this)　　　　//Window
 };
fn();

在严格模式开启后,this的指向又有所不同

严格模式下 : this指向undefined

 function fn(){
  "use strict"
  console.log(this)　　　　//undefined
 };
 fn();

2.函数的隐式执行 : this指向函数的直接执行对象

function fn(){
    console.log(this);　　　　
   };
   var a = 10;
   var obj = {
    a:20,
    b:fn
   };
   obj.b();　　　　　　　　//this指向obj
  var obj2 = {
    a:30,
    b:obj.b
   };
   obj2.b();　　　　　　　//this指向obj2
  var obj3 = {
    a:40,
   b:obj2　　　　　　　　
  };
  obj3.b.b();　　　　　　//obj3.b.b等价于obj2.b this指向obj2

但当函数作为参数传到另一个函数的变量时, 发生隐式丢失,this指向Window

function fn(){
   console.log(this)  //Window
  };
  var obj = {
   a:20,
   b:fn
  };
 setTimeout(obj.b, 1000);
  function setTimeout(cb,t){
   cb();   　　　　　//obj.b作为参数传给cb,而cb前没对象,相当于默认方式执行fn()
  };

3.函数的显式执行 : this指向指定对象

我们可以通过函数的bind、call、apply方式指定this的对象,还可以用来修复上文中的隐式丢失

var obj = {
  name: "obj",
  show: function () {
   console.log(this.name)
  }
 }
 obj.show();      //obj

 var obj2 = {
  name: "obj2"
 };
 obj.show.bind(obj2)();   //obj2

 var name = "蜡笔笑嘻嘻";
 obj.show.bind(window)(); 　//Window

4.构造函数执行(通过new执行)

构造函数中的this 会指向创建出来的实例对象

 function Person() {
  this.name = 'zhar';
 }
 var p = new Person();
 console.log(p.name);  //zhar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解JS中的this、apply、call、bind(经典面试题)

这又是一个面试经典问题~/(ㄒoㄒ)/~~也是 ES5中众多坑中的一个,在 ES6 中可能会极大避免 this 产生的错误,但是为了一些老代码的维护,最好还是了解一下 this 的指向和 call.apply.bind 三者的区别. this 的指向在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,来,跟着我朗读三遍:this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象.记住这句话
JS中改变this指向的方法(call和apply、bind)

this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);
解决vue.js this.$router.push无效的问题

如下所示: login() { if(this.email.length > 0 && this.password.length >0) { this.$http.post('/api/login', { user: this.email, password: this.password }) .then(res => { let userPwd = res.data if(this.password == userPwd) { this.$router.push(&qu
浅析JavaScript中var that=this

在阅读别人的代码时,发现别人写的代码中有这么一句:var that = this;,这代表什么意思呢?经过一番查阅,才明白是这么回事. 在JavaScript中,this代表的是当前对象. var that=this就是将当前的this对象复制一份到that变量中.这样做有什么意义呢? $('#conten').click(function(){ //this是被点击的#conten var that = this; $('.conten').each(function(){ //this是.c
关于js里的this关键字的理解

this关键字在c++,java中都提供了这个关键字,在刚开始学习时觉得有难度,但是只要理解了,用起来就方便多了,下面通过本篇文章给大家详解js里this关键字的理解. 关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己试了一下,额,还真的错了!在实际开发中,也会遇到 this 的问题(虽然一些类库会帮我们处理),例如在使用一些框架的时候,例如:knockout,有时候不明白为什么不直接使用this,而要把 this 作为参数传入. 接下来你谈谈我对它的理解,也作为一个笔记,
vue项目中在外部js文件中直接调用vue实例的方法比如说this

一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app
JavaScript箭头函数中的this详解

前言箭头函数极大地简化了this的取值规则. 普通函数与箭头函数普通函数指的是用function定义的函数: var hello = function () { console.log("Hello, Fundebug!"); } 箭头函数指的是用=>定义的函数: var hello = () => { console.log("Hello, Fundebug!"); } JavaScript箭头函数与普通函数不只是写法上的区别,它们还有一些微妙的不
简单分析js中的this的原理

很多人可能会有疑问,this到底是什么?为什么this的值变化多端? 首先我们来概括下this. this是一个对象,一般存在于函数中,表示当前函数的执行上下文; 值得一提的是,当函数在执行后,this才有绑定的对象,函数未执行时,this没有内容接下来我们看看在不同场景下的this的指向 1.函数默认执行 :此时this指向Window function fn(){ console.log(this) //Window }; fn(); 在严格模式开启后,this的指向又有所不同严格模式下
node.js中Buffer缓冲器的原理与使用方法分析

本文实例讲述了node.js中Buffer缓冲器的原理与使用方法.分享给大家供大家参考,具体如下: 一.什么是Buffer Buffer缓冲器是用来存储输入和输出数据的一段内存.js语言没有二进制数据类型,在处理TCP和文件流的时候,就不是很方便了. 所以node.js提供了Buffer类来处理二进制数据,Buffer类是一个全局变量,Buffer在创建的时候大小就固定了,无法改变. Buffer类的实例类似于由字节元素组成的数组,可以有效的表示二进制数据. 二.什么是字节字节是计算机存储时的
Vue.js中的computed工作原理

JS属性: JavaScript有一个特性是 Object.defineProperty ,它能做很多事,但我在这篇文章只专注于这个方法中的一个: var person = {}; Object.defineProperty (person, 'age', { get: function () { console.log ("Getting the age"); return 25; } }); console.log ("The age is ", person.
Node.Js中实现端口重用原理详解

本文介绍了Node.Js中实现端口重用原理详解,分享给大家,具体如下: 起源,从官方实例中看多进程共用端口 const cluster = require('cluster'); const http = require('http'); const numCPUs = require('os').cpus().length; if (cluster.isMaster) { console.log(`Master ${process.pid} is running`); for (let i =
简单分析Java的求值策略原理

形参和实参 java在定义方法时可以设置参数,参数分为形参和实参,形参是指在定义函数时用于接收外部传入数据的参数,而实参是指在调用方法时主调函数向被调函数传递的数据参数. 例如: public class Main { public static void main(String[] args) { int a = 2; int b = 3; System.out.println(sum(a,b));//5 } private static int sum(int i1,int i2){ ret
简单谈谈JS中的正则表达式

1.正则表达式包括两部分 ①定义正则表达式的规则: ②正则表达式的模式(i/g/m): 2.声明正则表达式 ① 字面量声明: var reg = /表达式规则/表达式模式: eg:var reg = /white/g: ② 使用new关键字: var reg = new RegExp("表达式规则","表达式模式") eg: var reg = new RegExp("white","g"): 3.正则表达式的三种模式 ① g
浅析JS中NEW的实现原理及重写

提到new,肯定会和类和实例联系起来,如: function Func() { let x = 100; this.num = x + } let f = new Func(); 上面的代码,我们首先创建了一个函数,如果是用面向对象的说法就是创建了一个Function类的实例,如果直接执行这个函数,那它就是一个普通的函数,如果用new执行,则这个函数被称为一个自定义的类. 如果是一个普通函数执行,他会如下做几件事: ·形成一个全新的执行上下文EC(Execution Context 执行环境)
简单分析React中的EffectList

React中,会遍历EffectList来执行节点操作.生命周期方法.Effect方法,可以把EffectList比作圣诞树上挂的彩灯,而这颗圣诞树就是Fiber树. 为什么会存在EffectList呢?打个比方来说,一颗Fiber树中有一些Fiber节点需要执行componentDidMount方法,如果在Fiber树构建完成后,再遍历一次Fiber树,找到需要执行componentDidMount方法的Fiber节点,这是非常低效的. 而EffectList就解决了这个问题,在Fiber树构
一道优雅面试题分析js中fn()和return fn()的区别

在js中,经常会遇到在函数里调用其它函数的情况,这时候会有 fn() 这种调用方式,还有一种是 return fn() 这种调用方式,一些初学者经常会被这两种方式给绕晕了.这里用一个优雅的面试题来分析一下两种方式的不同之处. var i = 0; function fn(){ i++; if(i < 10){ fn(); }else{ return i; } } var result = fn(); console.log(result); 这是一道隐藏了坑的面试题,看似很简单,大部分人可能想都
分析JS中this引发的bug

在 js 中,this 这个上下文总是变化莫测,很多时候出现bug 总是一头雾水,其实,只要分清楚不同的情况下如何执行就可以了,以下就是我们给大家整理的相关内容: 在JavaScript中有一个很特别.很常用又常常让初学者很困扰的东西 ─ "this",在这堂课中会来谈谈这个"this". this通常会指向一个对象,同时this会在不同的情境下指向不同的对象.让我们来看几个不同的情境,帮助我们更了解"this". window object (

简单分析js中的this的原理

相关推荐

随机推荐