JavaScript中的this指向和自定義屬性詳解

更新時間：2021年09月07日 15:43:12 作者：

下面小編就為大家?guī)硪黄猨s中的this指向和自定義屬性。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1.this關(guān)鍵字

this指向的是當(dāng)前元素

全局函數(shù)中的this指向window對象

代碼中聲明了一個全局函數(shù)，是屬于瀏覽器窗口對象的，所以this表示的就是瀏覽器窗口對象window

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

標(biāo)簽事件屬性中的this指向window對象

如果將一個全局函數(shù)在一個標(biāo)簽屬性中調(diào)用，如下：

<button onclick="fn()">點(diǎn)我試試</button>

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

事件屬性函數(shù)中的this指向當(dāng)前操作的標(biāo)簽

如果在標(biāo)簽對象的屬性上聲明了一個函數(shù)，此時這個函數(shù)屬于標(biāo)簽屬性，所以函數(shù)內(nèi)部的this指向當(dāng)前標(biāo)簽對象

<button id="btn">點(diǎn)我試試</button>

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

2.自定義屬性

在前端網(wǎng)頁的開發(fā)中，JavaScript語法操作的主要是標(biāo)簽對象，在一些特定的場合，需要通過設(shè)置自定義屬性來對標(biāo)簽進(jìn)行操作

基本語法：element.屬性名 =屬性值

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

3.綜合案例1：tab選項(xiàng)卡的實(shí)現(xiàn)

實(shí)現(xiàn)步驟
1.先完成靜態(tài)頁面的設(shè)計(jì)（html與css代碼見附錄）

2.先獲取頁面元素

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

3.通過for循環(huán)為元素添加點(diǎn)擊事件

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

4.給元素添加自定義屬性，給對應(yīng)的選項(xiàng)卡添加索引號

  uli[i].index = i;

給點(diǎn)擊事件添加對應(yīng)的樣式（完整代碼）

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';
            })
        }

注意：本案例是通過添加類名來實(shí)現(xiàn)對應(yīng)選項(xiàng)卡的顯示和隱藏，在給元素添加對應(yīng)的類名之前需要將所有元素的類名清除

附錄

<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>