Java Script-this、this指向

1.什么是this

在 JavaScript 中,this 是一个关键字,它指向当前执行代码的对象。this 的值取决于当前代码在哪里执行,可以是全局作用域、函数作用域、对象的方法中。

在全局作用域中,this 指向全局对象 window。

在函数作用域中,this 的值取决于函数是如何调用的。如果函数是作为普通函数调用的,this 指向全局对象 window;如果函数是作为对象的方法调用的,this 指向该对象;如果函数使用 call、apply 或 bind 方法调用,可以指定 this 的值。

在对象的方法中,this 指向该对象。

需要注意的是,this 的值是动态的,它随着代码的执行而变化。因此,在编写 JavaScript 代码时,需要注意 this 的使用方式,以确保代码的正确性和可读性。

2.this的多种用法

1.1 作为函数的参数

在函数中,this 可以作为参数传递进去,用于在函数内部引用外部的对象

function myFunction(obj) {
  console.log(obj);
}

var obj = {name: 'John'};
myFunction(obj);

1.2 作为函数的返回值

在函数中,this 可以作为返回值返回,返回当前对象

function myFunction() {
  return this;
}

var obj = {name: 'John'};
var result = myFunction.call(obj);
console.log(result);

1.3 作为对象的属性

在对象中,this 可以作为属性名使用,用于定义对象的属性

var myObj = {
  name: 'John',
  age: 30,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name + ', and I am ' + this.age + ' years old.');
  }
};

myObj.sayHello();

1.4 作为对象的方法

在对象中,this 可以作为方法名使用,用于定义对象的方法

var myObj = {
  name: 'John',
  sayHello: function() {
    console.log('Hello, my name is ' + this.name + '.');
  }
};

myObj.sayHello();

1.5 作为全局对象

在全局作用域中,this指向全局对象windows

console.log(this); // 输出全局对象 window

1.6 作为构造函数的this

在使用 new 关键字创建对象时,this 指向新创建的对象

function Person(name) {
  this.name = name;
}

var john = new Person('John');
console.log(john.name); // 输出 John

1.7 作为事件处理函数的this

在事件处理函数中,this 指向触发事件的元素

var myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() {
  console.log(this); // 输出触发事件的元素
});

3.call(),apply(),bind() 方法

1.1 call()

在 JavaScript 中,call() 方法是 Function 对象的一个方法,用于调用一个函数,并将指定的对象作为函数中 this 关键字的值。

<button class="btn">点击</button>
         call方法
        var btn = document.querySelector('.btn');
        function show(arr1,arr2,arr3){
            console.log(arr1,arr2,arr3);
        }
        btn.onclick = function(){
            show.call(this,1,2,3);
        }

1.2 apply()

在 JavaScript 中,apply() 方法是 Function 对象的一个方法,用于调用一个函数,并将一个类数组对象作为函数中 this 关键字的值,同时传递一个参数列表。

<button class="btn">点击</button>
        var btn = document.querySelector('.btn');
        function show(arr1,arr2,arr3,arr4){
            console.log(arr1,arr2,arr3,arr4);
            // console.log(this);
        }
        btn.onclick = function(){
            show.apply(this,[1,2,3,4]);//this指向btn
        }

1.3 bind()

bind()方法是JavaScript中的一个函数方法,它返回一个新函数,该函数具有与原始函数相同的函数体和作用域,但是值被绑定到了指定的对象上,同nd() 调用时预设一些参数

<button class="btn">点击</button>
        var btn = document.querySelector('.btn');
        function show(arr1,arr2,arr3){
            console.log(arr1,arr2,arr3);
        }
        btn.onclick = function(){
            show.bind(this,1,2,3)();//()表示立即执行
        }

1.4 call、apply、bind方法区别

call()、apply() 和 bind() 都是 JavaScript 中用于改变函数执行上下文的方法。

它们的区别如下:

  1. 参数的传递方式:

call() 和 apply() 方法都是通过将参数作为数组传递给函数来改变函数的执行上下文,而 bind() 方法则是通过返回一个新函数来改变函数的执行上下文。

  1. 参数的个数:

call() 和 apply() 方法的参数个数是固定的,必须传入与函数定义时的参数个数相同的参数,而 bind() 方法可以传入任意个数的参数。

  1. 参数的顺序:

call() 和 apply() 方法的参数顺序必须与函数定义时的参数顺序相同,而 bind() 方法的参数顺序可以随意。

  1. 返回值:

call() 和 apply() 方法的返回值是函数执行的结果,而 bind() 方法的返回值是一个新函数。

综上所述,call() 和 apply() 方法更适合在函数执行时改变上下文,而 bind() 方法则更适合在函数定义时就绑定上下文。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值