日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 前端文檔 正文

JavaScript?自定義對象方法匯總_javascript技巧

作者：季布， ? 更新時(shí)間： 2022-03-21 前端文檔

一 使用object創(chuàng)建對象

<script>
        // 創(chuàng)建對象
        var stu = new Object()
        // 給對象添加屬性
        stu.name='jibu'
        stu[9527] = 'jibu'  //特殊屬性名使用中括號
        // 為對象添加方法
        stu.study = function(){
            console.log('學(xué)習(xí)')
        }
        // 調(diào)用對象屬性和方法
        console.log(stu.name,stu['name'])
        //調(diào)用方法
        stu.study()
    </script>

二 使用構(gòu)造函數(shù)創(chuàng)建對象

<script>
        // 1.定義一個(gè)構(gòu)造函數(shù)創(chuàng)建對象
        function Student() {
            // 對象屬性
            this.name = 'jibu'
            this.age = 18
                //對象的方法
            this.study = function() {
                console.log('正在學(xué)習(xí)......')
            }
        }
        // 2. 調(diào)用構(gòu)造函數(shù)創(chuàng)建對象
        var stu = new Student()
        console.log(stu.name)
        stu.study()

        // 定義一個(gè)帶參數(shù)的構(gòu)造函數(shù)
        // 定義一個(gè)構(gòu)造函數(shù)創(chuàng)建對象
        function Student(name, age) {
            // 對象屬性
            this.name = name
            this.age = age
                //對象的方法
            this.study = function() {
                console.log('正在學(xué)習(xí)......')
            }
        }
        //調(diào)用構(gòu)造函數(shù)創(chuàng)建對象
        var stu = new Student('tom', 18)
        console.log(stu.name)
        stu.study()
    </script>

三 字面量創(chuàng)建對象

var stu = {
            name: 'jibu',
            age: 100,
            '特殊變量':1111
            study: function() {
                console.log('正在學(xué)習(xí)')
            },
            show: function() {
                console.log('我叫' + this.name, '年齡:' + this.age)
            }
        }
        console.log(stu.name)
        console.log(stu['特殊變量']

四 this 關(guān)鍵字

this 表示當(dāng)前對象

  • 函數(shù)中的this,表示調(diào)用函數(shù)的當(dāng)前對象
  • 事件綁定的匿名回調(diào)函數(shù)中的this，表示事件源
  • 構(gòu)造函數(shù)中的this,表示將來new出來的當(dāng)前對象

示例一

<script>
        // 函數(shù)中的this，表示函數(shù)的調(diào)用者
        var a = 1

        function f1() {
            var a = 2
            console.log(this)
                // 解決局部變量和全局變量同名問題
            console.log('局部變量: ', a)
            console.log('全局變量: ', window.a)
            console.log('全局變量: ', this.a)

        }
        f1()
    </script>

示例二

 <script>
        window.onload = function() {
            document.querySelector('#btn').onclick = function() {
                console.log(this) //此處this表示事件源 觸發(fā)事件的目標(biāo)元素
            }
        }
    </script>
</head>

<body>
    <button id="btn">按鈕</button>
</body>

示例三

<script>
        function Student(name, age) {
            // 構(gòu)造函數(shù)中this,表示將來new出來的當(dāng)前對象 
            this.name = name
            this.age = age
        }
    </script>

五 基本數(shù)據(jù)類型和引用數(shù)據(jù)類型

基本數(shù)據(jù)類型

string,number,boolean,undefined,null

<script>
        var a = 5
        var b = a
        b = 8
        console.log(a)
        console.log(b)
    </script>

創(chuàng)建變量a,b引用a相當(dāng)于賦值了一份，修改互不影響

引用數(shù)據(jù)類型

object,array,Student…

<script>
        var stu1 = {
            name: 'tom',
            age: 18
        }
        var stu2 = stu1; //將stu1地址賦值給stu2
        stu1.name = 'alice'
        console.log(stu1.name)
        console.log(stu2.name)
    </script>

這里會(huì)發(fā)現(xiàn)和基本數(shù)據(jù)類型操作一樣但是結(jié)果不一樣會(huì)互相影響，
這里就涉及到了內(nèi)存問題

內(nèi)存分為兩種：

棧內(nèi)存：

基本數(shù)據(jù)類型的變量和引用數(shù)據(jù)類型的變量的引用,會(huì)存儲(chǔ)在棧內(nèi)存中，存取速度比較快

堆內(nèi)存：

引用數(shù)據(jù)類型的變量，會(huì)存儲(chǔ)在堆內(nèi)存中，存取速度較慢

引用數(shù)據(jù)類型的變量會(huì)存儲(chǔ)在棧里面(內(nèi)存地址)，其對象會(huì)存儲(chǔ)在堆里面，stu2引用stu1其實(shí)就是內(nèi)存地址的引用是一樣的，所有修改的時(shí)候結(jié)果都是一樣的

基本數(shù)據(jù)類型的變量和值都是存儲(chǔ)在棧中的，把a(bǔ)的值給b，所有修改互不影響

六 閉包

如何理解閉包？

  • 在一個(gè)函數(shù)內(nèi)部又定義了一個(gè)函數(shù)，這個(gè)定義在內(nèi)部的函數(shù)就是閉包
  • 閉包能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)
  • 閉包是某個(gè)作用域內(nèi)定義的函數(shù)，該函數(shù)可以訪問這個(gè)作用域的所有變量
  • 從作用上來說，閉包就是將函數(shù)內(nèi)部和外部函數(shù)連接起來的一座橋梁

閉包的用途

  • 在函數(shù)的內(nèi)部，可以讀取到函數(shù)內(nèi)部的變量
  • 讓變量的值始終保存在內(nèi)存中

閉包的使用

?

   <script>
        function add() {
            for (var i = 1; i <= 5; i++) {
                var li = document.createElement('li')
                li.innerText = 'li' + i
                li.onclick = function() {
                    console.log('點(diǎn)擊了第' + i + 'li')
                }
                document.getElementById('myul').appendChild(li)
            }
        }
    </script>
    <style>
        ul {
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <button onclick="add()">添加元素</button>
    <ul id="myul">

    </ul>
</body>

因?yàn)檠h(huán)在點(diǎn)擊元素按鈕的時(shí)候就已經(jīng)結(jié)束了，所有始終獲取的都是最后一個(gè)，這就形成了閉包

解決方法一：

不在函數(shù)內(nèi)部定義含，將函數(shù)定義在外面，在函數(shù)內(nèi)部調(diào)用

<script>
        function add() {
            for (var i = 1; i <= 5; i++) {
                var li = createLi(i)
                document.getElementById('myul').appendChild(li)
            }
        }

        function createLi(num) {
            var li = document.createElement('li')
            li.innerText = 'li' + num
            li.onclick = function() {
                console.log('點(diǎn)擊了第' + num + 'li')
            }
            return li
        }

解決方法二：

為元素添加屬性用來存儲(chǔ)變量

<script>
        function add() {
            for (var i = 1; i <= 5; i++) {
                var li = document.createElement('li')
                li.innerText = 'li' + i
                li.num = i; //存儲(chǔ)數(shù)據(jù)
                li.onclick = function() {
                    console.log('點(diǎn)擊了第' + this.num + 'li')
                }
                document.getElementById('myul').appendChild(li)
            }
        }
    </script>

解決方法三：

使用let定義變量

塊級作用域，它所申明的變量所在的區(qū)域不會(huì)收到外部影響，稱為暫時(shí)性死去

<script>
        function add() {
            for (let i = 1; i <= 5; i++) {
                var li = document.createElement('li')
                li.innerText = 'li' + i
                li.onclick = function() {
                    console.log('點(diǎn)擊了第' + i + 'li')
                }
                document.getElementById('myul').appendChild(li)
            }
        }
    </script>

七 Json

JavaScript Object Notation 是一種輕量級的數(shù)據(jù)交換格式，用于表示JavaScript對象的一種方式，采用與編程語言無關(guān)的文本格式，易于編寫和閱讀，同時(shí)也易于解析和生成

基本用法

{“屬性名”:“屬性值”,“屬性名”:“屬性值”…}

注意：

  • Json結(jié)構(gòu)是由一系列的鍵值對組成，稱為Json對象
  • 屬性名使用雙引號
  • Json和對象字面量的區(qū)別：JSON屬性必須使用雙引號，而對象字面量可以不加

符合屬性

<script>
        //復(fù)合屬性 值為json對象
        var user = {
            "name": {
                "firstName": "ji",
                "lastName": "bu"
            },
            "age": 100
        }
        console.log(user.name.firstName)
    </script>

Json對象的集合

<script>
        //復(fù)合屬性 值為json對象
        var user = [{
                    "id": 1,
                    "firstName": "ji",
                    "lastName": "bu"
                }, {
                    "id": 1,
                    "firstName": "ji",
                    "lastName": "bu"
                }, {
                    "id": 1,
                    "firstName": "ji",
                    "lastName": "bu"
                },

            ]
            //循環(huán)
        for (var i = 0; i < user.length; i++) {
            console.log(user[i])
        }
    </script>

JSON 操作

 <script>
        //JSon對象轉(zhuǎn)換成字符串
        var stu = {
            "id": 1,
            "name": "jibu"
        }
        console.log(typeof stu)
        var str = JSON.stringify(stu);
        console.log(typeof str)


        // 將字符串轉(zhuǎn)成JSON
        var str = '{"id": 1,"name": "jibu"}'
        console.log(typeof str)

        var obj = JSON.parse(str)
        console.log(typeof obj)
    </script>

原文鏈接：https://blog.csdn.net/weixin_47906106/article/details/122214407

欄目分類
最近更新