JavaScript中的this指向和自定义属性详解

2024-09-30 08:25:32

1.this关键字

this指向的是当前元素

全局函数中的this指向window对象

代码中声明了一个全局函数，是属于浏览器窗口对象的，所以this表示的就是浏览器窗口对象window

function fn() {
	consolo.log(this);
}
fn()

标签事件属性中的this指向window对象

如果将一个全局函数在一个标签属性中调用，如下：

<button onclick="fn()">点我试试</button>

function fn() {
	console.log(this)
}

事件属性函数中的this指向当前操作的标签

如果在标签对象的属性上声明了一个函数，此时这个函数属于标签属性，所以函数内部的this指向当前标签对象

<button id="btn">点我试试</button>

var btn = document.getElementById('btn');
btn.onclick = function() {
	console.log(this);
}

2.自定义属性

在前端网页的开发中，JavaScript语法操作的主要是标签对象，在一些特定的场合，需要通过设置自定义属性来对标签进行操作

基本语法：element.属性名 =属性值

var btn = document.getElementById('btn');
btn.index = 1;

3.综合案例1：tab选项卡的实现

实现步骤
1.先完成静态页面的设计（html与css代码见附录）

2.先获取页面元素

 var uli = document.querySelector('ul').querySelectorAll('li');
 var oli = document.querySelector('ol').querySelectorAll('li');

3.通过for循环为元素添加点击事件

for (var i = 0; i < uli.length; i++) {
            uli[i].addEventListener('click', function () {
               } )
        }

4.给元素添加自定义属性，给对应的选项卡添加索引号

  uli[i].index = i;

给点击事件添加对应的样式（完整代码）

for (var i = 0; i < uli.length; i++) {
            uli[i].index = i;
            uli[i].addEventListener('click', function () {
                for (var j = 0; j < uli.length; j++) {
                    uli[j].className = '';
                    oli[j].className = '';
                }
                this.className = 'current';
                oli[this.index].className = 'current';
            })
        }

注意：本案例是通过添加类名来实现对应选项卡的显示和隐藏，在给元素添加对应的类名之前需要将所有元素的类名清除

附录

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box {
            height: 250px;
            width: 300px;
            border: 2px solid;
        }
        ul {
            display: flex;
            justify-content: space-between;
            background: red;
            border-bottom: 2px #ccc;
        }
        ul li {
            float: left;
            width: 100px;
            color: #fff;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        ul li.current {
            border-bottom: 5px green solid;
        }
        ol li {
            margin: 30px;
            display: none;
        }
        ol li.current {
            display: block;
        }
    </style>
    <div class="box">
        <ul>
            <li class="current">第一页</li>
            <li>第二页</li>
            <li>第三页</li>
        </ul>
        <ol>
            <li class="current">我是第一页</li>
            <li>我是第二页</li>
            <li>我是第三页</li>
        </ol>
    </div>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

JavaScript中的this指向问题详解

前言相信我,只要记住本文的 7️⃣ 步口诀,就能彻底掌握 JS 中的 this 指向. 先念口诀:箭头函数.new.bind.apply 和 call.欧比届点(obj.).直接调用.不在函数里. 按照口诀的顺序,只要满足前面某个场景,就可以确定 this 指向了. 接下来按照口诀顺序对它们进行详解,文中示例代码都运行在 Chrome 的 Console 控制台中. 文末有精心准备的练习题,用于检验学习成果,别忘了试试~ 1. 箭头函数箭头函数排在第一个是因为它的 this 不会被改变,所以
JS 里为什么会有 this

目录 1.需求 2.方案 3.第一次改进 4.加糖 5.费解 6.存在问题 7.对象与函数 1.需求假设我们有一个对象 var person = { name: 'Frank', age: 18, phone: '13812345678', sayHi: function(){ // 待补充 }, sayBye: function(){ // 待补充 } } 这个 person 对象有 name 和 age 属性,还有一个 sayHi 方法,现在的需求是: 调用 person.sayHi(..
Javascript中函数分类&this指向的实例详解

JS中定义函数的三种方式通过实例来说明吧 <script> //method1 function fn() { console.log('fn created '); } //method2 var fn2 = function () { console.log('fn2 created'); } //method3 var fn3 = new Function('test', 'console.log(test);'); fn3('fn3 test'); console.dir(fn3);
JavaScript函数中this指向问题详解

this关键字哪个对象调用函数,函数里面的this指向哪个对象. **严格模式下:**在全局环境中,this指向的是undefined **非严格模式下:**在全局环境中,this指向的是window 全局定义的函数直接调用,this => window function fn(){ console.log(this); // 此时 this 指向 window } fn(); // 相当于 window.fn() 对象内部的函数调用,this => 调用者 var obj = { fn:f
JavaScript 中this指向问题案例详解

总结全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数全局环境无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window
JavaScript逐点突破系列之this是什么

了解this 也许你在其他面向对象的编程语言曾经看过this,也知道它会指向某个构造器(constructor)所建立的对象.但事实上在JavaScript里面,this所代表的不仅仅是那个被建立的对象. 先来看看ECMAScript 标准规范对this 的定义: 「The this keyword evaluates to the value of the ThisBinding of the current execution context.」「this 这个关键字代表的值为当前执行上下
JavaScript中的this指向和自定义属性详解

目录 1.this关键字 2.自定义属性 3.综合案例1:tab选项卡的实现附录总结 1.this关键字 this指向的是当前元素全局函数中的this指向window对象代码中声明了一个全局函数,是属于浏览器窗口对象的,所以this表示的就是浏览器窗口对象window function fn() { consolo.log(this); } fn() 标签事件属性中的this指向window对象如果将一个全局函数在一个标签属性中调用,如下: <button onclick="fn
JavaScript 中有关数组对象的方法(详解)

JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象----函数(js中的一等对象).数组(键值的有序集合). 数组元素的添加 arrayObj.push([item1 [item2 [. . . [itemN ]]]]); 将一个或多个新元素添加到数组结尾,并返回数组新长度 arrayObj.unshift([item1 [item2 [. . .
JavaScript中闭包的写法和作用详解

1.什么是闭包闭包是有权访问另一个函数作用域的变量的函数. 简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内.而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数和声明的其他内部函数.当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包. 2.变量的作用域要理解闭包,首先要理解变量的作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变
javascript中call,apply,bind的区别详解

在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是this要指向的对象. 3.都可以利用后续参数传参. 那么他们的区别在哪里的,先看一个例子. var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " ,
Javascript中的迭代、归并方法详解

迭代方法在Javascript中迭代方法个人觉得尤为重要,在很多时候都会有实际上的需求,javascript提供了5个迭代方法来供我们操作,它们分别为: every() 对数组中的每一个项运用给定的函数,如果每项都返回true,那么就会返回true filter() 对数组中的每一个项运用给定的函数,把返回true的项组成一个新数组并返回 forEach() 对数组中的每一项运用给定的函数,但是没有任何的返回值 map() 对数组中的每一个项运用给定的函数并返回每次函数调用的结果组成新的数组
JavaScript中SetInterval与setTimeout的用法详解

setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止参数描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数
JavaScript中Number对象的toFixed() 方法详解

定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 语法 NumberObject.toFixed(num) 参数描述 num 必需.规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20,有些实现可以支持更大的数值范围.如果省略了该参数,将用 0 代替. 返回值返回 NumberObject 的字符串表示,不采用指数计数法,小数点后有固定的 num 位数字.如果必要,该数字会被舍入,也可以用 0 补足,以便它达到指定的长度.如果 num 大于 l
JavaScript中关键字 in 的使用方法详解

for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为"枚举". 对于数组 ,迭代出来的是数组元素但不推荐,因为不能保证顺序,而且如果在Array的原型上添加了属性,这个属性也会被遍历出来,所以最好数组使用正常的for循环,对象使用for-in循环对于对象 ,迭代出来的是对象的属性: var obj = { "key1":"value1", "key2":"value2", &q
在JavaScript中对HTML进行反转义详解

在JavaScript中对字符串进行转义和反转义操作,常用的方法莫过于使用encodeURI (decodeURI).encodeURIComponent (decodeURIComponent)这几个方法,具体使用方法和区别. 但是如何在JavaScript中对HTML进行反转义操作呢?例如下面这段代码: var jsonData = { title: "<%= data.name? data.name : title %>", desc: "<%= da
javascript中href和replace的比较(详解)

在使用javascript的时候,有时候对于经常使用的方法太熟悉而忽略了他们之间原理的细微差别. 举例如下: window.location.href,window.location.replace. 这两种方式都可以让页面跳转到一个新的页面,但是其中我就忽略了跳转之后的细节,比如返回的原来的页面. window.location.href中的href其实就是<a>标签中的href,使用这个进行页面跳转后,可以使用浏览器的后退按钮退回到原来的页面,也可以使用history.go(-1)函数跳转

JavaScript中的this指向和自定义属性详解

目录

1.this关键字

2.自定义属性

3.综合案例1：tab选项卡的实现

附录

总结

相关推荐

随机推荐