箭头函数 一个参数 // 只有一个参数 // f : 函数名称 // v : 函数参数 // v+v : 函数内容 let f=v=> v+v console.log(f(10)) //20 两个参数 // 两个参数需加小括号 let ff=(v1,v2)=> v1+v2 console.log(ff(10,20)) 多个语句 // 有多个语句的时候需要加大括号 // 有多个语句的时候return不能省略 let fff=(a,b,c)=> { console.log(a) return…
ES3 ES5this的指向问题 this指的是该函数被调用的对象 var foo = function () { this.a = 'a', this.b = 'b', this.c = { a: 'new a', b: function () { //new a 此时this指的是该函数被调用的对象 return this.a; } } } console.log(new foo().c.b()); //new a ES6的箭头函数 箭头函数的this指的是定义时this的指向,b在定义时,…
箭头函数和普通函数的区别如下. 普通函数:根据调用我的人(谁调用我,我的this就指向谁) 箭头函数:根据所在的环境(我再哪个环境中,this就指向谁) 一针见血式总结: 普通函数中的this: 1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (常见的window的属性和方法有: alert, lo…
1.回调函数中,用箭头函数改变this的作用域 success: (res)=>{ this.setData({ //此时,this指向page页面 ... }) } 2.自定义事件中,如果使用箭头函数,则箭头函数中的this指向undefined,不指向page onLike: (event)=>{ likeModel.like(this.data.classic.id) //报错,this指向undefined }, 需要修改成传统函数形式 onLike: function(event){…
- 普通函数   | 具名普通函数.匿名普通函数,在不作为对象的属性值的情况下,其内部的 this 总是指向代码运行环境下的全局对象 ( 例如,浏览器中的 window ). 示例: (function() { console.log(this); // window (function() { console.log(this); // window (function() { console.log(this); // window })() })() })()   | 普通函数,均可以通过…
最近在学习angularJs的时候由于里面涉及到了箭头函数,箭头函数除了声明上有点区别以外,和普通函数最主要的区别还是在this的问题上. Js中函数中嵌套的函数this不会 “继承”.比如说以下代码: var o = { name:'xwt', age:13 } function outer(){ console.log(this);//输出{name:'xwt,age:13} !function inner(){ console.log(this);//输出window }(); } out…
使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: var name = 'my name is window'; var obj = { name: 'my name is obj', fn: function () { var timer = null; clearInterval(timer); timer = setInterval(function () { console.log(this.name);  //my na…
我发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug. 对于之前学习过c或者是Java的朋友来说可能这个问题还比较好解决,因为c中指针的指向和Java中类的跳转其实和JS中this的指向有异曲同工之妙. 在这里简单给大家稍微举几个例子  希望对大家有所帮助. JS中this的指向不同于其他语言,JS中的this不是指向定义他的位置,而是在哪调用它它就指向哪里. JS中,普通的函数调用方式有三种:直接…
最近在使用vue过程中,使用axios进行接口请求,确发现取不到值,返回为undefined. show (item) { let searchText = item.keyword console.log(this) // 返回vue实例 axios.get('http://localhost:3000/search/multimatch?keywords=' + searchText, {}, {headers: {'Content-Type': 'application/x-www-for…
es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){return this.a} } }; console.log(new factory().c.b()); // a+ 通过es5的语法调用,返回的是 a+ ,this 的指向是该函数被调用的对象,也就是说函数被调用的时候,这个 this 指向的是谁,哪个对象调用的这个函数,这个 this 就是谁.…
使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: 1 var name = 'my name is window'; 2 var obj = { 3 name: 'my name is obj', 4 fn: function () { 5 var timer = null; 6 clearInterval(timer); 7 timer = setInterval(function () { 8 console.log(this…
首先复习下普通函数里的this指向: function test(){ console.log(this) } test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数  函数里的this就指向谁,test()等价于window.test(),所以是window var name="outername" var o={ name:"innername", getname:function(){ console.log(this.name) }…
普通函数:this指向分为4种情况,1. obj.getName();//指向obj2.getName();//非严格模式下,指向window,严格模式下为undefined3. var a = new A();   a();//指向A本身4.getName().apply(obj);//指向obj 箭头函数:箭头函数本身是没有this和arguments的,在箭头函数中引用this实际上是调用的是定义时的上一层作用域的this.这里强调的是上一层作用域,是因为对象是不能形成独立的作用域的.例如…
在react中绑定事件处理函数的this指向一共有三种方法,本次主要总结这三种方式. 项目创建 关于项目的创建方法,在之前的文章中有记录,这里不再赘述,项目创建成功后,按照之前的目录结构对生成的项目进行调整,新建一个Home.js组件,并在App.js中引入该组件. Home.js import React from 'react'; class Home extends React.Component{ constructor(props){ super(props); this.state=…
在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这三个方法进行详细的讲解,并列出几个经典应用场景. 1.call(thisArgs [,args...]) 该方法可以传递一个thisArgs参数和一个参数列表,thisArgs 指定了函数在运行期的调用者,也就是函数中的 this 对象,而参数列表会被传入调用函数中.thisArgs 的取值有以下4…
不多逼逼 直接上代码: var name = "window"; var obj = { name: 'obj', //普通函数 one: function(){ console.log(this.name) }, //箭头函数 two: ()=> { console.log(this.name) }, //普通函数中的箭头函数 three: function(){ (()=>{ console.log(this.name) })() }, //多层箭头函数 four: (…
Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没有property 不可以使用 yield 命令,因此箭头函数不能用作 Generator 函数 不可以使用 new 命令,因为: 没有自己的 this,无法调用 call,apply 没有 prototype 属性 ,而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的…
javascrit中this的指向 全局作用域或者普通函数中 this 指向全局对象 window. //直接打印 console.log(this) //window //function声明函数 function bar () {console.log(this)} bar() //window //function声明函数赋给变量 var bar = function () {console.log(this)} bar() //window //自执行函数 (function () {c…
在javscript中,this 是在函数运行时自动生成的一个内部指针,它指向函数的调用者. 箭头函数有些不同,它的this是继承而来, 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象. var name = "window"; var test = { name:"demo", // 传统函数 getName1: function(){ console.log(this.name); // demo var that = this; setTimeo…
一.es6的箭头函数es6箭头函数内部没有this,使用时会上朔寻找最近的this不可以做构造函数,不能使用new命令,因为没有this函数体内没有arguments,可以使用rest参数代替不能用yield,不能使用generator函数二.疑问下面代码中的箭头函数arrows的this指向window let obj = { aaa: '123', arrows : () => { console.log('arrows',this); }, func : function () { con…
OK,对于箭头函数的this 用一句话概括:箭头函数中的this指向的是定义时的this,而不是执行时的this. 如果上面这句话听的是懂非懂或者完全不懂的,没关系,下面会有案例讲解. 举个栗子 来看看this的一个使用案例: //定义一个对象 var obj = { x:100, //属性x show(){ //延迟500毫秒,输出x的值 setTimeout( //匿名函数 function(){console.log(this.x);}, 500 ); } }; obj.show();//…
1.this的使用场景 我们先把this的使用场景分为两大类:函数外和函数内: 函数外的this 就是在全局代码里,直接使用this: "use strict"; let name = "window"; console.log(this); console.log(this.name); // Window // 'window' 从结果看,在函数外的this指向很简单,就直接指向的是全局变量Window对象,(浏览器环境,以下代码都是在浏览器环境) 而且严格模式…
1. 箭头函数没有prototype(原型),所以箭头函数本身没有this let a = () =>{}; console.log(a.prototype); // undefined 2. 箭头函数的this指向在定义的时候继承自外层第一个普通函数的this. 下面栗子中在一个函数中定义箭头函数,然后在另一个函数中执行箭头函数. let a, barObj = { msg: 'bar的this指向' }; fooObj = { msg: 'foo的this指向' }; bar.call(ba…
this的指向问题 一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window. function a(){ console.log(this); //输出函数a中的this对象 } function b(){}; var c={name:"call"}; //定义对象c var c = { getFunc:function(){ return function(){ console.log(this) } } } var cFun = c.getFunc…
一.函数声明和函数表达式的区别: 函数声明放在if——else语句中,在IE8中会出现问题 函数表达式则不会 <script> if(true){ function f1(){ console.log("我是第一个函数"); } }else{ function f1(){ console.log("我是第二个函数"); } } f1();//我是第一个函数 f1();//我是第二个函数(IE8) //函数声明的函数,放在if--else语句中,在IE8中…
1.前言 在JavaScript中,this的指向一直是大多数初学者的易错点,总是搞不清楚this到底指向谁,而在求职面试中,this的指向问题往往又是高频考点.本篇博文就来总结一下在JavaScript中不同情况下this到底指向谁. 2.热身一下 首先,我们先来看看下面的代码,请问,下面这段代码运行后会在控制台输出什么?如果你能马上回答出程序输出的结果,那么你已经很清楚this的指向了,不用再往下看了. var bar = 2; var obj = { bar: 1, foo: functi…
摘要: 神奇的this! 原文:JS 中 this 在各个场景下的指向 译者:前端小智 Fundebug经授权转载,版权归原作者所有. 1. this 的奥秘 很多时候, JS 中的 this 对于咱们的初学者很容易产生困惑不解. this 的功能很强大,但需要一定付出才能慢慢理解它. 对Java.PHP或其他标准语言来看,this 表示类方法中当前对象的实例.大多数情况下,this 不能在方法之外使用,这样就比较不会造成混淆. 在J要中情况就有所不同: this表示函数的当前执行上下文,JS…
const在函数前与函数后的区别 一   const基础           如果const关键字不涉及到指针,我们很好理解,下面是涉及到指针的情况:           int   b   =   500;      const   int*   a   =   &b;              [1]      int   const   *a   =   &b;              [2]      int*   const   a   =   &b;         …
我们已经知道,在任意代码片段外部添加包装函数,可以将内部的变量和函数定义"隐 藏"起来,外部作用域无法访问包装函数内部的任何内容. 例如: var a = 2; function foo() { // <-- 添加这一行 var a = 3; console.log( a ); // 3 } // <-- 以及这一行 foo(); // <-- 以及这一行 console.log( a ); // 2 虽然这种技术可以解决一些问题,但是它并不理想,因为会导致一些额外的…
先看一段代码 var f = function g() { return 1; }; if (false) { f = function g(){ return 2; }; } alert(g()); 你知道在不同浏览器中的输出结果是什么吗? 把这段代码放到IE 6 和chorme,firefox里面是完全不同的效果,ie6里面会输出2,chorm以及firefox会输出g没有定义,这是JScript的bug(微软给自己的javascript起名为JScript),IE6未能正确区分哪个是函数声…