JavaScript:this-关键字,2024中级前端开发面试解答

简介: JavaScript:this-关键字,2024中级前端开发面试解答

正文

function f(){
return this.a;
}
var g = f.bind({a:“js”});
console.log(g()); // js
var h = g.bind({a:‘html’}); // this已经被绑定bind的第一个参数,不会重复绑定,输出的值还是js
console.log(h()); // js
var o = {a:css, f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // css, js, js
• 箭头函数:
在箭头函数中,箭头函数的this被设置为封闭的词法环境的,换句话说,箭头函数中的this取决于该函数被创建时的环境。
var objProject = this;
var foo = (() => this);
console.log(foo()); // window
console.log(objProject); // window
console.log(foo() === objProject ); // true
// 作为对象的一个方法调用
var obj = {foo: foo};
console.log(obj.foo() === objProject ); // true
// 尝试使用call来设定this
console.log(foo.call(obj) === objProject ); // true
// 尝试使用bind来设定this
foo = foo.bind(obj);
console.log(foo() === objProject ); // true
• 作为对象的方法调用时:
当函数作为对象的方法被调用时,this指向调用的该函数的对象
var obj = {
a: 37,
fn: function() {
return this.a;
}
};
console.log(obj.fn()); // 37
• 作为构造函数:
当一个函数用作构造函数时(使用new关键字),它的this被绑定到正在构造的新对象。
function C(){
this.a = 37;
}
var o = new C();
console.log(o.a); // 37
function C2(){
this.a = 37;
return {a:38};
}
o = new C2();
console.log(o.a); // 38,手动设置了返回对象
• 作为DOM事件处理函数
当函数被用作事件处理函数时,它的this指向触发事件的元素
// 被调用时,将关联的元素变成蓝色
function bluify(e){
console.log(this === e.currentTarget); // 总是 true
// 当 currentTarget 和 target 是同一个对象时为 true
console.log(this === e.target);
this.style.backgroundColor = ‘#A5D9F3’;
}
// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName(‘*’);
// 将bluify作为元素的点击监听函数,当元素被点击时,就会变成蓝色

最后


相关文章
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
526 156
|
Java 程序员
面试官的加分题:super关键字全解析,轻松应对!
小米,29岁程序员,通过一个关于Animal和Dog类的故事,详细解析了Java中super关键字的多种用法,包括调用父类构造方法、访问父类成员变量及调用父类方法,帮助读者更好地理解和应用super,应对面试挑战。
231 3
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
239 5
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
缓存 安全 Java
【Java面试题汇总】Java基础篇——基础、修饰符和关键字(2023版)
Java的特点和优点,、Java 8的新特性、面向对象、基本数据类型和引用类型、自动拆装箱与自动装箱、==与equals()的区别、为什么重写equals()就要重写hashcode()、抽象类和接口的区别、重载和重写的区别、四种引用方式、wt()和sleep()的区别、java方法是值传递还是引用传递?访问修饰符、static、final、this和super、volatile的用法及原理
【Java面试题汇总】Java基础篇——基础、修饰符和关键字(2023版)
|
前端开发 JavaScript 开发者
除了 async/await 关键字,还有哪些方式可以在 JavaScript 中实现异步编程?
【10月更文挑战第30天】这些异步编程方式在不同的场景和需求下各有优劣,开发者可以根据具体的项目情况选择合适的方式来实现异步编程,以达到高效、可读和易于维护的代码效果。
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
344 1
|
JavaScript 前端开发
JavaScript this 关键字
JavaScript this 关键字
115 2
|
JavaScript 前端开发 Java
JavaScript 保留关键字
JavaScript 保留关键字
141 2
|
JavaScript 前端开发
JavaScript 语句标识符(关键字)
【8月更文挑战第29天】
234 5

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1011
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    427
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    339
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    321
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    434
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    613
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    855
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    223
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    695
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    396
  • 下一篇
    开通oss服务