首页 > 其他分享 >秒杀面试题!JS中this指向的理解和运用

秒杀面试题!JS中this指向的理解和运用

时间:2023-03-12 12:13:56浏览次数:48  
标签:面试题 console name 指向 JavaScript 调用函数 JS 秒杀 log

 


1.引言

本文旨在讲解JavaScript中的this指向的概念和运用,帮助前端开发者更好地理解和应用this关键字。

 

2.this的概念

在JavaScript中,this是一个关键字,用于指向当前执行代码的对象。它的值在函数执行时确定,具体取决于函数的调用方式。

 

2.1 全局上下文中的this

在全局上下文中,this指向的是全局对象(例如浏览器中的window对象),即使没有显式指定this。可以通过以下代码验证:

console.log(this === window); // 输出true

 

2.2 函数上下文中的this

在函数内部,this的值取决于函数的调用方式。可以通过以下四种方式调用函数:

 

2.2.1 直接调用函数

当函数以独立函数的形式调用时,this指向全局对象。例如:

 

JavaScript
function test() {
  console.log(this === window);
}
test(); // 输出true

 

2.2.2 作为对象的方法调用函数

当函数作为对象的方法调用时,this指向该对象。例如:

 

JavaScript
var obj = {
  test: function() {
    console.log(this === obj);
  }
};
obj.test(); // 输出true

 

 

2.2.3 通过call()和apply()方法调用函数

通过call()和apply()方法可以改变函数内部this的指向。例如:

 

JavaScript
function test() {
  console.log(this);
}
test.call("hello"); // 输出字符串"hello"
test.apply("world"); // 输出字符串"world"

 

2.2.4 通过new关键字调用函数

当使用new关键字调用函数时,this指向新创建的对象。例如:

 

JavaScript
function Person(name) {
this.name = name;
}
var person = new Person("Tom");
console.log(person.name); // 输出"Tom"

 

 

3. this的运用

this在JavaScript中有很多运用场景,以下列举几个常用的场景。

 

3.1 构造函数中使用this

在构造函数中,this通常用于指向新创建的对象,例如:

 

 

JavaScript
function Person(name, age) {
this.name = name;
this.age = age;
}
var person = new Person("Tom", 18);
console.log(person.name); // 输出"Tom"
console.log(person.age); // 输出18

 

 

3.2 使用call()和apply()方法调用函数

call()和apply()方法可以改变函数内部this的指向,例如:

 

JavaScript
var obj1 = {
name: "Tom",
getName: function() {
return this.name;
}
};
var obj2 = {
name: "Jerry"
};
console.log(obj1.getName.call(obj2)); // 输出"Jerry"
console.log(obj1.getName.apply(obj2)); // 输出"Jerry"

 

 

3.3 使用bind()方法绑定this

bind()方法可以创建一个新函数,其this值被绑定到指定的对象,例如:

 

JavaScript
var obj = {
name: "Tom",
getName: function() {
return this.name;
}
};
var getName = obj.getName.bind(obj);
console.log(getName()); // 输出"Tom"

 

4. 总结

this是JavaScript中一个重要的关键字,它用于指向当前执行代码的对象。学好this指向对于前端开发十分重要,请大家一定要掌握!

 

原文链接:http://lao-zhao.com/post/27.html

 

 

标签:面试题,console,name,指向,JavaScript,调用函数,JS,秒杀,log
From: https://www.cnblogs.com/lao-zhao/p/17207927.html

相关文章

  • Day08-Json补充
    JSON一.JSON1JSON回顾JavaScript对象文本表示形式(JavaScriptObjectNotation:js对象简称)【1】json在js中是一个对象,在java中是字符串【2】json是目前前后......
  • Android Js交互,调起Js中的方法
    //调用PC端方法例如方法名为:editBtn()if(Build.VERSION.SDK_INT<18){mWebView.loadUrl("javascript:editBtn()");......
  • Docker json文件配置
    点击查看代码[root@master0~]#cat/etc/docker/daemon.json{"exec-opts":["native.cgroupdriver=systemd"],"log-driver":"json-file","log-opts":{......
  • JS中进行字符串的相等比较时用==遇到的坑
    场景JS中使用==来判断两个字符串是否相等。遇到坑的代码:varselect_id=Cookies.get("select_id");if(select_id==undefined){select_id="1"}如果说Cookie......
  • Sqlserver中使用ISNULL、CAST、CASE完成对jsTree数据的查询
    场景在上面中使用的查询jsTree数据的语句为:SELECTid,ISNULL(CAST(pidASVARCHAR(50)),CAST('#'ASVARCHAR(50)))parent,icon,text,num,org_class......
  • js Set 去重优化
    场景:往tempListExtra塞入数据,返回过滤后的数组。constarr=[...tempListExtra,...extraOpt];constset=newSet();constduplication=arr.filter((item:any)=>......
  • 力扣---面试题 17.05. 字母与数字
    面试题17.05.字母与数字给定一个放有字母和数字的数组,找到最长的子数组,且包含的字母和数字的个数相同。返回该子数组,若存在多个最长子数组,返回左端点下标值最小的子......
  • js 分钟 转 小时
     1functionminute(75){2if(MM<0){3return''4}5varss=MM%606ss<10?(ss='0'+s......
  • Day02-js高级
    回顾1.html作用:书写网页的,整个网页的架构2.html属于不用编译的语言,直接使用浏览器运行即可3.html都是由预定义的标签: 1)超链接标签:<ahref="跳转服务器地址"target="_s......
  • Day03-Ajax&Json
    AJAX&JSON一.AJAX的概述1.1什么是ajax导入02_代码\授课素材\01_ajax素材\同步\day0301_maven-usermanager项目到idea中演示同步弊端。同步:异步:1.AJAX=Asynchr......