this,call,apply,arguments

自建博客文章链接: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]);

在这里插入图片描述

Guess you like

Origin blog.csdn.net/weixin_45815859/article/details/115876603