ES6箭头函数this指向和arguments知识

最新推荐文章于 2022-04-03 00:11:45 发布
最新推荐文章于 2022-04-03 00:11:45 发布
阅读量87 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xutongbao/p/9924845.html
版权

 

 

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">   
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />       
<title>箭头函数</title>
<style type="text/css">
html {height: 100%;}
body {width: 200px;height: 100%;position: relative;padding: 0;margin: 0;}
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script>
var obj = {
    data: ['beijing', 'shanghai'],
    init: function () {
        console.log(arguments[0].name);//xutongbao
        var test = () => {
            console.log(this.data);//["beijing", "shanghai"]
            console.log(arguments[0].name);  //xutongbao
        }
        test();        
    }
}
obj.init({name: 'xutongbao'});
var test = () => {
    console.log(arguments);  //未定义 ReferenceError: arguments is not defined
}
test({name: 'xutongbao'}); 
</script>
</body>
</html>

由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略：

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">   
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />       
<title>箭头函数</title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script>
var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
var age = obj.getAge(2018); // 28
console.log(28)

</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/xutongbao/p/9924845.html

weixin_30298497
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
箭头函数的arguments
JudyC的博客
02-20 8006
箭头函数的arguments ES5中的arguments function func(a,b,c){ console.log(arguments[0],arguments[1],arguments[2]) //1,2,3 } func(1,2,3) 箭头函数是没有arguments的，那么我们用什么来代替呢? let func = (...rest) =&gt; { consol...
ES6 箭头函数及this指向详解
weixin_44486539的博客
07-17 337
箭头函数相当于匿名函数，箭头函数简化了函数的定义，比函数表达式更简洁，并且没有自己的this，arguments。。。 基础语法 (参数1, 参数2, …) => { 函数体 } 最简单的箭头函数（没有形参、函数体语句单一） let fn = () => console.log('最简写的箭头函数') fn() // 最简写的箭头函数 相当于： var fn = function...
ES6新特性-箭头函数
weixin_46115791的博客
08-19 1313
ES6新特性的学习一.箭头函数的基础语法二.箭头函数的高级语法三.箭头函数的this指向 一.箭头函数的基础语法 //一般语法： (参数1, 参数2, …, 参数N) => { 函数声明 } //相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; } (参数1, 参数2, …, 参数N) => 表达式（单一） // 当只有一个参数时，圆括号是省略的： (单一参数) => {函数声明} 单一参数 => {函数声明} // 没有参数的函数应该写成一对
七、对象基础 (三) -- this对象和arguments对象
weixin_45602227的博客
07-28 266
一、数组（Array） 1.数组也是一个对象 2.数组与普通对象的不用之处在于 对象使用属性名操作属性。 数组使用索引值操作元素。 索引值：从0开始的整数。 3、typeof arr 会返回object。 1、数组中的元素可以是任意数据类型。 2、数组的长度可以任意改变。过长缺位的为undefined。过短缺位的被删除。 1.1 操作数据 1） 创建数组对象 创建数组对象 var arr=new Array(); var ar
【Javascript】【箭头函数】js的箭头函数没有this和arguments
天天向上 Up Up Up (*^▽^*)
04-16 3867
js的箭头函数是没有this和arguments变量的，如果这2个变量可以打印出来值，那么他们一定是来自父级作用域的 function f() { this.a = 1; let b = () => alert(this.a); b(); } //弹出结果为1 ...
ES6 箭头函数this指向问题
兜里有米
11-30 886
1.箭头函数语法var a = b => c2.箭头函数this通过一个例子：var obj={ a:5, func:()=>{ //console.log(this); //Window console.log(this.a); }, test:function(
ES6箭头函数和扩展实例分析
10-15
**ES6箭头函数**是JavaScript的一个重要更新，它提供了更简洁的语法来定义函数，尤其是在处理回调函数和匿名函数时。箭头函数的主要特点包括： 1. **语法简洁**： 箭头函数的基本形式是 `(参数列表) => 表达式`。...
ES6中的箭头函数实例详解
08-30
总结，ES6中的箭头函数提供了更简洁的函数定义方式，尤其是在处理`this`上下文时，能够避免传统函数中常见的`this`指向问题。然而，由于其特性限制，箭头函数并不适用于所有场景，开发者需根据实际需求选择合适的...
ES6对象方法声明对象时，箭头函数this的指向问题
01-08
没有this、super、arguments 和 new.target 绑定 不能通过 new 关键字调用 没有 prototype 不可以绑定this 的绑定 不支持argument 不支持重复命名参数 疑问 // 第一种 用 var 定义 value var value = '小明' ...
es6函数之箭头函数用法实例详解
10-15
ES6中的箭头函数是JavaScript语法的一大改进，它提供了一种更加简洁的函数定义方式，同时也改变了函数中`this`的绑定规则。下面我们将详细探讨箭头函数的基本用法、特性以及注意事项。 ### 基本用法 1. **单参数...
ES6中的箭头函数详细梳理
热门推荐
weixin_45709829的博客
04-03 2万+
一、箭头函数的介绍 1.1 什么是箭头函数 ES6中允许使用=>来定义函数。箭头函数相当于匿名函数，并简化了函数定义。 1.2 基本语法 // 箭头函数 let fn = (name) => { // 函数体 return `Hello ${name} !`; }; // 等同于 let fn = function (name) { // 函数体 return `Hello ${name} !`; }; 箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=
this指向学习中遇到的问题，arguments[0]()
m0_46360310的博客
09-11 384
原代码 逛社区时看到一段有关this指向的问题，在arguments[0]()这里有些不懂，代码如下： var length = 1 function fn() { console.log(this.length) } const person = { length: 2, say(fn) { fn() arguments[0]() } } person.say(fn, 1, 2) 不理解时认为person.say(fn, 1, 2)执行fn(
学习ES6笔记──工作中常用到的ES6语法
weixin_34273481的博客
08-19 2547
一、let和const 在JavaScript中咱们以前主要用关键var来定义变量，ES6之后，新增了定义变量的两个关键字，分别是let和const。对于变量来说，在ES5中var定义的变量会提升到作用域中所有的函数与语句前面，而ES6中let定义的变量则不会，let声明的变量会在其相应的代码块中建立一个暂时性死区，直至变量被声明。let...
arguments[0]()做闭包时的的this对象
lzf的博客
10-24 3564
var length = 10; function fn(){ alert(this.length) } var obj = { length: 5, method: function(fn) { arguments[0]() } } obj.method(fn) 这段代码中的arguments[0]()是第一个参数？带一对小括号是什么意思
ES6语法——箭头函数
mumuwei的博客
06-19 288
ES6允许使用箭头 (=>) 定义函数 1、声明一个函数 let fn = function(){ } let fn = (a,b) => { return a + b; } 2、调用函数 let result = fn(1, 2); console.log(result);
JS中数据类型判断
weixin_48253922的博客
09-23 153
1 typeof 可以判断数据类型，它返回表示数据类型的字符串（返回结果只能包括number,boolean,string,function,object,undefined）； 可以使用typeof判断变量是否存在（如if(typeof a!=“undefined”){…}）； Typeof 运算符的问题是无论引用的对象是什么类型 它都返回object 2 instanceof 因为A instanceof B 可以判断A是不是B的实例，返回一个布尔值，由构造类型判断出数据类型 console.log(
网易试题——关于箭头函数与this和arguments的关系
理智lili的博客
09-22 364
昨天做试题的时候遇到了这个题目 var a = 1; function fn1() { console.log(this.a) } const fn2 = () => { console.log(this.a) } const obj = { ...
ES6函数细节干货（包括arguments，new.target，箭头函数）
weixin_45846980的博客
03-25 434
前言 在正式接触ES6函数之前，相比大家对ES3.1中的函数都有所了解，那么从下面博客ES6的知识干货中跟ES3.1做对比，这样才能更好的理解。 函数 ES6函数新增特性 1.ES6参数可以加默认值(new) eg:通过传默认值就可以达到想要的效果 function fun(a,b=10,c=20){ return a+b+c; console.log( fun(undefined,unde...
箭头函数和普通函数饿区别
最新发布
06-13
箭头函数是 JavaScript ES6 引入的一种简洁的函数语法，它相对于传统的函数表达式有以下几个主要的区别： 1. **语法简洁**：箭头函数的定义更简短，通常形式为 `(参数) => { 函数体 }` 或者在只有一个参数的情况下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值