自建博客文章链接:http://www.heblogs.cn/articleDetails/60feb74cc1e4a0695c1f8668
隐式参数this
1、普通函数普通调用,this就指向window。
function a(){
var a = 10
console.log(this)
}
a()
#log
window
2、this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,而不是函数创建时所在的对象。
var o = {
a:10,
fn:function(){
console.log(this.a)
}
}
o.fn();
#log
10
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a)
}
}
}
o.b.fn();
#log
12
3、匿名函数和不处于任何对象中的函数,this指向window。
var name = 'window'
var person = {
name :'Alan',
sayName:function () {
return function () {
console.log(this.name)
}
}
}
person.sayName()()
#log
window
4、call,appply,with 指的this 是谁就是谁。
function fn(){
console.log(this)
}
var obj = {
name: 'LLLLL'}
fn.call();
fn.call(obj)
#log
window
{
name: 'LLLLL'}
call apply
每个函数都包含两个非继承而来的方法:apply()和call()。
call与apply都属于Function.prototype的一个方法,所以每个function实例都有call、apply属性;
call()/apply() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
call()和作用与 apply() 方法类似。
只有一个区别,call() 方法分别接受参数,apply() 方法接受数组形式的参数。
,以下我会使用call来写实例。
1、这里因为call的第一个参数是来指定函数的运行环境的,在未指定,或者指定为“null,undefined”等情况下,认为是window环境,所以如上,如果指定了,那么this就指向你所指定的对象
function fn(){
console.log(1) }
fn()
fn.call()
2、对于可以转化为对象的比如string和number来说,call会尝试让它转化为对象,但是,像null,undefined等,不能转化的值来说,this就会强制指向window。因此,要想让你指定的this有效,必须是对象
function fn(){
console.log(this)
}
var String = 'String'
fn.call();
fn.call(String)
#log
window
['S','t'....]
function fn1(){
console.log("fn1")
}
function fn2(){
console.log("fn2")
}
fn2.call.call.call.call(fn1)
#log
fn1
var language = {
name: '小明',
sayName: function(lan) {
console.log(`我是${
lan.name}`)
},
sayWord: function(lan, word){
console.log(`${
lan.name}说:${
word}`)
}
}
//case1 我们要拿到language的name属性,必须像下边这样
language.sayName(language)
language.sayWord(language, 'call不难理解')
#log
我是小明
小明说:call不难理解
可是这样看着太繁琐了,你甚至会觉得sayName和sayWord方法定义在外边更合适一点
所以,而this的作用在这种情况下就能体现出来了,对象可以改成这样:
var language = {
name: '小明',
sayName: function() {
console.log(`我是${
this.name}`)
},
sayWord: function(word){
console.log(this)
console.log(`${
this.name}说:${
word}`)
}
}
//case2.1 // js解析器会查找语句中是否有call或者apply或者bind之类的关键字,如果有,那么就是用指定的this;如果没有,那么将“.”前边的内容视为this
language.sayName(language)
language.sayWord('call并不难理解')
#log
我是小明
小明说:call不难理解
//case2.2 js解析器查找到call 但是sayWord.call指定的this为String
language.sayName.call(language)
language.sayWord.call('call并不难理解')
我是小明
undefined说:undefined
//case3 js解析器查找到call 并指定新的this
const arr = {
name:'小红'}
language.sayName.call(arr)
language.sayName.call({
name: '小红'})
language.sayName.call(arr,'this指向被切换了')
#log
我是小红
我是小红
小红说:this指向被切换了
隐式参数arguments
他是一个封装实参的对象 它的值就是我们传递进去的参数,虽然我们没有给fun函数定义形参,但是我们还是可以通过arguments来调用传递给函数fun的实参
function fun(){
console.log(arguments);
}
fun('tom',[1,2,3]);