JS函数相关知识点总结

最新推荐文章于 2022-08-14 16:45:08 发布

Llllll_lu

最新推荐文章于 2022-08-14 16:45:08 发布

阅读量266

点赞数 1

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/Zhuzhu123qwwe/article/details/125839838

版权

箭头函数

1.没有自己的this,this指向定义时的上下文。
2.没有arguments
3.不能作为构造函数实例化

函数声明与函数表达式

js引擎在任何代码执行之前，会先读取函数声明，并在执行上下文中生成函数定义。函数声明提升：函数声明会在任何代码执行之前先被读取并添加到执行上下文。

而函数表达式必须等到代码执行到它，才会在执行上下文中生成函数定义。

函数内部存在两个特殊的对象：arguments和this和一个特殊的属性：new.target

1.arguments
是一个类数组对象，包含调用函数时传入的所有参数。（只有以function关键字定义函数时才会有，箭头函数没有）有一个callee属性，是指向arguments所在函数的指针。

2.this

在标准函数中，this引用的是把函数当成方法调用的上下文对象。

window.color = 'red'; 
let o = { 
    color: 'blue' 
}; 
function sayColor() { 
    console.log(this.color); 
} 
sayColor(); // 'red' 
o.sayColor = sayColor; 
o.sayColor(); // 'blue'

在箭头函数中，this引用的是定义箭头函数的上下文。

window.color = 'red'; 
let o = { 
    color: 'blue' 
}; 
let sayColor = () => console.log(this.color); //在window上下文中定义的
sayColor(); // 'red' 
o.sayColor = sayColor; 
o.sayColor(); // 'red'

在事件回调或定时回调中调用某个函数，将回调函数写为箭头函数，this值会指向想要的对象，因为箭头函数的this会保留定义函数时的上下文。

function King() { 
    this.royaltyName = 'Henry'; 
    // this 引用 King 的实例
    setTimeout(() => console.log(this.royaltyName),    1000); 
}
function Queen() { 
    this.royaltyName = 'Elizabeth'; 
    // this 引用 window 对象
    setTimeout(function() { console.log(this.royaltyName); }, 1000); 
} 
new King(); // Henry 
new Queen(); // undefined

let p = {
    a: function () {
        let obj = {
        i: 10,
        b: () => {console.log(this.i, this, p)},
        c: function () {
            console.log(this.i, this)
            }
        }
        obj.b();//undefined  p{a: ƒ}
        obj.c();//10  obj{i: 10, b: ƒ, c: ƒ}
    }
}
p.a();

var obj = {
    i: 10,
    b: () => console.log(this.i, this),
    c: function() {
        console.log( this.i, this)
    }
}
obj.b();  // undefined window{...}
obj.c();  // 10 obj{i: 10, b: ƒ, c: ƒ}