es6中的箭头函数和this关键字的说明(详细)

news/2024/7/11 0:01:05 标签: js, es6

  • 1.箭头函数
  • 2.js的this指向

1.箭头函数

=>等价于return 它不能作为构造函数,不能new

let xx = () => 555; //xx为一个函数,调用时需带()
console.log(xx()); //555
//等同于
function xx2() {
    return 555;
}
console.log(xx2()); //555


//返回的是一个对象,若要返回对象需使用(),因为{}表示的是代码块
//当有一个参数时,参数括号可以省略,当箭头函数有0或>1个参数时,()不可省略
//当箭头函数函数体又多行语句,要使用{},只有一行,并且要返回结果时{}可省略
let obj = parm => ({
    id: parm,
    name: '我是obj'
});
console.log(obj('haha')); //{id:"haha",name:"我是obj"}

//在箭头函数中this的指向,是它所在的父级函数的作用域,而不是他所在的那个函数

let bb = {
    name: '豆豆',
    init: function() { //该this为其所在的对象
        console.log(this); //{name:"豆豆",init:f}
    }
}
bb.init() //{name:"豆豆",init:f}

let bb2 = {
    name: "豆豆2",
    init: () => { //该this指向的是他所在的对象的父级,也就是window
            console.log(this); //Window{window:Window,......}
        } //原因:箭头函数没有function关键字,它没有形成自己的作用域。es6只是语法糖,就是简写
}
bb2.init() //Window{window:Window,......}

//箭头函数不能使用new,它的构造器指向的是window构造函数
//箭头函数没有prototype属性
let fn = () => {
        console.log(this.constructor); //Window()
        console.log(this.prototype); //undefined
    }
    // new fn() //报错 fn is not a constructor
fn() //Window()  undefined

jsthisfont_51">2.js的this指向

//函数内部的this,是在函数调用的时候来确定其指向的

function t1() {
    console.log(this); //Window
} //因为每个函数都是window的属性,调用某个函数,其实就是调用了window对象的属性
t1() //Window

var t2 = {
    id: 2,
    fn: function() {
        console.log(this); //{id:2,fn:f} 
        //;this指向t2对象,因为fn函数是被t2对象调用,所以fn中的this就指向了t2对象

        // function fn1() {
        //     console.log(this); //Window 
        // } //this指向window对象,因为fn1()只是在fn()里面执行,它并不是t2对象的属性
        // fn1()
    }
}
t2.fn() //{id:2,fn:f}

var t3 = t2.fn; //函数是按引用传递的
t3() //Window

function t4() {
    this.x = 111;
    console.log(this);
}
t4() //Window
new t4() //t4{x:111} 原因:new关键字改变了函数内的指向,使其指向刚创建的对象

http://www.niftyadmin.cn/n/1728627.html

相关文章

兴趣点推荐代码_[深度模型] 阿里MIND网络:天猫首页是怎么给用户做多兴趣embedding的...

本人微信公众号为“推荐算法学习笔记”,定期推出经典推荐算法文章,欢迎关注。一. 概述我们知道推荐系统一般有两个重要阶段,召回和精排阶段。召回阶段负责从海量的商品中选出用户感兴趣的候选集,精排阶段再对这些候选集进行排序取…

Vue.config.productionTip = false

Vue.config.productionTip false,阻止启动生产消息; 没有Vue.config.productionTip false这句代码,它会显示你生产模式的消息; 开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。 而在生产环境下&#x…

java_责任链接模式

介绍: 避免请求发送者和接受者耦合在一起,让多个对象都有可能接收请求将这些对象连接成一条链,并沿着这条链传递请求,直到有对象处理它为止. 主要角色: 抽象处理者(Handler) 抽象处理者定义了一个处理请求的接口,它一般设计为抽象类,由于不同的具体处理者处理请求的方式不同…

python单元测试框架对比_前端测试框架对比(js单元测试框架对比)

前端测试框架对比(js单元测试框架对比)本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容。测试分类通常应用会有 单元测试(Unit tests) 和 功能测试(Functional tests),复杂大型应用可能会有整合测试(Integration tests)。其中&#…

Vue中key属性的作用(实用)

转载: https://blog.csdn.net/zyj362633491/article/details/86654014

python 档案管理系统_Python的檔案導向API

無論看哪個文件,無論翻開哪本書籍,談到Python的檔案處理,一律就是介紹open函式的使用,再搭配一個開檔模式列表。承認吧!每隔一段時間沒用,你就總是得再次確認那些r、w、x、a、等模式,到底代表哪…

springboot项目报错Field XXX in XXXX required a bean of type XXXXX that could not be found.

报错信息 Field messageUtil in com.syn.service.Impl.UserServiceImpl required a bean of type com.syn.util.MessageUtil that could not be found.The injection point has the following annotations:- org.springframework.beans.factory.annotation.Autowired(requiredt…

通过CASE WHEN 自定义排序

主要内容: ORDER BY CASE WHEN status 0 and delete_flag0 THEN 1 WHEN status 1 and delete_flag0 THEN 2 WHEN delete_flag 1 THEN 3 END asc, id desc 案例: select * from pf_cms where 11 ORDER BY CASE WHEN status 0 and delete_flag0 THEN 1 WHEN status 1 and…