this的三个典型应用

最新推荐文章于 2024-07-04 11:25:38 发布
转载 最新推荐文章于 2024-07-04 11:25:38 发布 · 455 阅读 · 0
文章标签：

#this的三个典型应用

博客介绍了this的三个典型应用。一是在html元素事件属性中使用；二是通过示例展示了在构造函数中使用this定义对象属性；三是利用Math.max的apply和call方法结合this求数组最大值，如对[5, 458, 120, -215]求最大值。

（1）、在html元素事件属性中使用，如：

（2）、构造函数

function Animal(name, color) {
　　this.name = name;
　　this.color = color;
}
（3）、input点击，获取值

(4)、apply()/call()求数组最值

var numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(this, numbers);
console.log(maxInNumbers); // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215);
console.log(maxInNumbers); // 458

零点符号
关注
Java 继承复用避坑指南：五个血泪案例揭示高频陷阱
曾经“等你生日那天”都遥远得像未来，如今却可欢愉的挥手说“下个十年见”
05-11 13万+
本文系统剖析了继承滥用在实际系统中的五类典型陷阱，包括逻辑被绕过、构造失控、行为不一致、初始化混乱等问题，并通过真实业务案例与测试验证，逐一展示问题根源与演进优化方案。文章强调：继承是一把双刃剑，设计不慎将带来系统性隐患。 最终，我们总结出继承的适用边界，倡导以组合、接口、策略等手段替代非必要的继承，实现更健壮、可演进的业务架构。希望本文能为你在系统设计与代码演进中提供深度启发。
第3-2课：用三个水桶等分 8 升水的问题
oRbIt 的专栏
09-22 2986
有这样一个智力题目：有三个分别是 3 升、5 升和 8 升容积的水桶，其中容积为 8 升的水桶中装满了水，容积为 3 升和容积为 5 升的水桶是空的，三个水桶都没有体积刻度。现在需要把大水桶中的 8 升水等分成两份，每份都是 4 升水，附加条件是只能使用这 8 升水和另外两个空水桶，不能借助其他容器或更多的水。 问题分析 好莱坞电影《虎胆龙威 3》中，布鲁斯·威利斯饰演的纽约警探约翰·麦克...
3个使用this的典型应用
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
08-13 1043
写出3个使用this的典型应用 1、在html元素事件属性中使用，如： <input type=”button” οnclick=”put(this);” value=”点击一下”/> 2、构造函数 function click(name, color) { 　　this.name = name; 　　this.color = color; } 3、input点击，获取值 <in......
js中this的用法
weixin_30545285的博客
05-07 324
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。 1、纯粹函数调用。 function test() { this.x = 1; alert(x);}test(); 其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。 var x = ...
写出3个使用this的典型应用
angshune2376的博客
06-18 205
转载于:https://www.cnblogs.com/jain/p/3795278.html
四个 this 的典型应用
m_review的博客
06-05 399
构造函数中 function Animal(name, age) { this.name = name; this.age = age; } 绑定 DOM 元素 <input type="button" onclick="showInfo(this);" value="button" /> 获取 DOM 元素的属性或者值 <input id="btn" type="b...
JavaScript 中 this的典型应用
ZQQD_优快云的博客
11-06 230
（1）、在html元素事件属性中使用，如： <input type=”button” οnclick=”showInfo(this);” value=”点击一下”/>` （2）、构造函数 function Animal(name, color) { 　　this.name = name; 　　this.color = color; } （3）、input点击，获取值 <input type="button" id="text" value="点击一下" /> <script
改变javascript函数内部this指针指向的三种方法
10-29
jQuery中的.each()函数就是一个应用了apply方法来控制上下文的典型例子，它允许回调函数内部的this指向当前遍历到的DOM元素。 总结来说，理解JavaScript中this关键字的指向规则，掌握如何控制this的指向是编写有效...
[笔记] 高等数学在各工程门类的典型应用场景
含光左卫的工作笔记集
07-04 2416
必须引入高等数学知识才能解决的问题，相关工业门类及问题概述；包含复杂信号时域分析与微小信号提取技术相关的书目，期刊
一个安卓项目，This is a Android project.zip
08-27
一个典型的安卓项目通常包含多个文件和文件夹，它们共同构成了整个项目的结构。其中，代码文件主要包括Java和Kotlin文件，用于编写应用程序的主要逻辑和业务功能；资源文件通常包括布局XML文件、图片资源文件和字符...
JavaScript中的this使用详解
10-21
this是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。今天我们就来详细探讨下this的使用
[学习笔记] this 的5个应用场景
Xeeeeiii的博客
04-28 322
1. this 作用于普通函数使用 function fn() { console.log(this) //this === window } 2. this 作用于 call, apply, bind 这里也顺便写出 call, apply 和 bind 的用法和区别， 之前刚接触这3种方法的时候弄的有点懵 const obj = { num: 2 } const arr = [1,2,3] function AddTwo (a) { console.log(typeof this) /
this的 5 种应用场景
louShuMei 的博客
04-27 474
1、作为普通函数 function fn1() { console.log(this) } fn1() //window 在全局执行，this指向全局 2、使用call apply bind fn1.call({ x: 1 }) //{x:1} const fn2 = fn1.bind({ x: 2 }) fn2() //{x: 2} 3、作为对象方法被调用 co...
this关键字的应用
Bald_Creator的博客
06-29 570
一、调用属性和方法 this是Java中常用的关键字，代表当前对象本身，可以理解为：指向当前对象的一个引用。 this在Java中可用于调用成员属性、成员方法、构造方法，也可以当作参数进行方法传参以及方法返回值。 应用1：this.成员属性 示例：分别在run和eat方法中，通过this访问属性month和name public class Cat{ //成员属性：年龄，昵称 int month; String name;//昵称 //成员方法：跑动 public void run(int mo
this的应用
l55iuming的专栏
07-09 649
//给人定义一个功能，用来判断是否是同龄人； class Person { private int age; private String name; Person(int age) { this.age=age; } public boolean compare(Person p) { return this.age==p.age;//！
关于js里的this关键字的理解
灵云山的博客
06-30 690
this关键字在c++，java中都提供了这个关键字，在刚开始学习时觉得有难度，但是只要理解了，用起来就方便多了，下面通过本篇文章给大家详解js里this关键字的理解。 关于this，是很多前端面试必考的题目，有时候在网上看到这些题目，自己试了一下，额，还真的错了！在实际开发中，也会遇到 this 的问题（虽然一些类库会帮我们处理），例如在使用一些框架的时候，例如:knockout，有时候不明白
this关键字的概述和应用
LeoZuosj的博客
01-17 2732
this关键字的概述和应用 A：this关键字特点，代表当前对象的引用。（谁来调用我，我就代表谁） B：案例演示this的应用场景：用来区分成员变量与局部变量重名。 注：成员变量必须由当前对象来调用。class Demo_Person{ public static void main(String[] args){ Person p1 = new Person();
写出js中三个使用this的典型应用
最新发布
12-11
<think>嗯，用户这次想了解JavaScript中this关键字的三个典型应用场景。根据引用内容，this在JavaScript中确实是个容易让人困惑的概念，用户可能需要明确的使用案例来帮助理解。 从引用[2]和[3]可以看出，this的指向会随执行环境变化，这是理解它的关键。用户之前似乎已经接触过基础概念，现在需要更具体的场景化说明。 第一个典型场景应该是对象方法调用，引用[3]的person.fullName()例子很经典。这里this自然指向调用该方法的person对象，可以把这个案例作为第一个场景。 第二个场景要考虑构造函数的情况。引用[4]和[5]都提到new关键字会改变this指向，让this绑定到新创建的实例上。tom.showName()的例子特别能说明问题，这个应该作为第二个场景。 第三个场景选什么呢？引用[1]提到MDN文档中有详细解释，想到事件处理函数中的this通常会指向触发事件的DOM元素。虽然用户提供的引用里没直接说，但这是前端开发中非常常见的应用场景，值得补充。 用户提供的几个引用质量不错，特别是阮一峰和MDN的资源都很有权威性。在回答时要注意把技术点说得通俗些，毕竟用户可能正在学习这个概念。对于构造函数那个场景，引用[5]的解释有点绕，需要简化成更直白的表述。 最后生成的问题要覆盖用户可能延伸的疑问，比如箭头函数对this的影响，这在现代JS开发中太重要了，必须包含进去。 </think> JavaScript中`this`关键字的行为取决于其执行上下文，以下是三个最典型的应用场景及其核心原理分析： ### 1. 对象方法中的`this`（指向调用对象） **场景描述**： 当函数作为对象的方法被调用时，`this`指向**调用该方法的对象**。 **示例代码**： ```javascript const person = { name: &#39;Alice&#39;, greet() { console.log(`Hello, I&#39;m ${this.name}`); } }; person.greet(); // 输出：Hello, I&#39;m Alice（this指向person对象） ``` **关键点**： - `greet`方法中的`this`由调用者`person`决定 - 若方法被分离调用（如`const fn = person.greet; fn()`），`this`会丢失绑定（非严格模式下指向`window`）[^3] --- ### 2. 构造函数中的`this`（指向新实例） **场景描述**： 使用`new`调用构造函数时，`this`绑定到**新创建的对象实例**。 **示例代码**： ```javascript function User(name) { this.name = name; // this指向新实例 this.sayHi = () => console.log(`Hi, ${this.name}!`); } const bob = new User(&#39;Bob&#39;); bob.sayHi(); // 输出：Hi, Bob!（this绑定bob实例） ``` **关键点**： - `new`操作符会： 1. 创建新空对象 `{}` 2. 将新对象的原型链指向构造函数的`prototype` 3. 将`this`绑定到该新对象 4. 执行构造函数逻辑 5. 返回新对象（除非构造函数返回非空对象）[^4][^5] --- ### 3. 事件处理器中的`this`（指向触发元素） **场景描述**： 在DOM事件处理函数中，`this`默认指向**触发事件的元素**。 **示例代码**： ```javascript document.querySelector(&#39;button&#39;).addEventListener(&#39;click&#39;, function() { console.log(this); // 输出：<button>元素（this指向被点击的按钮） }); ``` **关键点**： - 此规则适用于传统`function`定义的监听器 - 箭头函数会继承外层`this`（通常指向`window`），不适用于需要元素引用的场景[^1] --- ### 关键区别总结 | 场景 | `this`指向 | 绑定方式 | |---------------------|---------------------|------------------| | 对象方法调用 | 调用对象 | 隐式绑定 | | `new`构造函数 | 新创建的实例 | new绑定 | | DOM事件处理函数 | 触发事件的DOM元素 | 浏览器默认绑定 | > ⚠️ **注意事项**：箭头函数没有自己的`this`，会继承外层作用域的`this`值，因此在上述场景中表现不同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值