简单分析js中的this的原理
很多人可能会有疑问,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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
解决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箭头函数中的this详解
前言 箭头函数极大地简化了this的取值规则. 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () { console.log("Hello, Fundebug!"); } 箭头函数指的是用=>定义的函数: var hello = () => { console.log("Hello, Fundebug!"); } JavaScript箭头函数与普通函数不只是写法上的区别,它们还有一些微妙的不
-
浅析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、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);
-
关于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
-
简单分析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 (
随机推荐
- 计算机指令
- VirtualBox 配置虚拟网卡(桥接),实现主机-虚拟机网络互通(图文教程)
- Js sort排序使用方法
- PHP中static关键字以及与self关键字的区别
- Python脚本实现格式化css文件
- asp实现sql的备份与恢复
- 用asp获取微软安全更新列表的代码 小偷程序
- JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
- div+CSS 兼容小摘
- 将对象转化为字符串的java实例
- C#动态创建Access数据库及表的方法
- PHP 接入支付宝即时到账功能
- 通过javascript把图片转化为字符画
- javascript闭包入门示例
- 浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
- JavaScript动态加载重复绑定问题
- MySQL组合索引与最左匹配原则详解
- React父子组件间的传值的方法
- java基面试础知识详解
- vue中当图片地址无效的时候,显示默认图片的方法