JavaScript?自定義對象方法匯總

更新時間：2022年01月25日 14:24:55 作者：季布，

這篇文章主要介紹了JavaScript?自定義對象,主要介紹一些方法object創(chuàng)建對象、使用構(gòu)造函數(shù)創(chuàng)建對象、字面量創(chuàng)建對象、等展開話題，具有一定的參考價值，需要的小伙伴可以參考一下

一使用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ò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()

        // 定義一個帶參數(shù)的構(gòu)造函數(shù)
        // 定義一個構(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 表示當前對象

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

示例一

<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ā)事件的目標元素
            }
        }
    </script>
</head>

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

示例三

<script>
        function Student(name, age) {
            // 構(gòu)造函數(shù)中this,表示將來new出來的當前對象 
            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相當于賦值了一份，修改互不影響

引用數(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>

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

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

棧內(nèi)存：

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

堆內(nèi)存：

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

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

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

六閉包

如何理解閉包？

在一個函數(shù)內(nèi)部又定義了一個函數(shù)，這個定義在內(nèi)部的函數(shù)就是閉包
閉包能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)
閉包是某個作用域內(nèi)定義的函數(shù)，該函數(shù)可以訪問這個作用域的所有變量
從作用上來說，閉包就是將函數(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('點擊了第' + 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>

因為循環(huán)在點擊元素按鈕的時候就已經(jīng)結(jié)束了，所有始終獲取的都是最后一個，這就形成了閉包

解決方法一：

不在函數(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('點擊了第' + num + 'li')
            }
            return li
        }

解決方法二：

為元素添加屬性用來存儲變量

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

解決方法三：

使用let定義變量

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

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

七 Json

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

基本用法

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

注意：

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>

到此這篇關(guān)于JavaScript 自定義對象介紹的文章就介紹到這了,更多相關(guān)JavaScript 自定義對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript 密碼強度判斷代碼
JavaScript 密碼強度判斷代碼，其實就是利用了判斷一些特殊符號，字符串長度等來實現(xiàn)判斷。
2009-09-09
js實現(xiàn)點擊切換checkbox背景圖片的簡單實例
下面小編就為大家?guī)硪黄猨s實現(xiàn)點擊切換checkbox背景圖片的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
微信小程序如何實現(xiàn)快速精確定位
騰訊位置服務(wù)為微信小程序提供了基礎(chǔ)的標點能力、線和圓的繪制接口等地圖組件和位置展示、地圖選點等地圖API位置服務(wù)能力支持,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何實現(xiàn)快速精確定位的相關(guān)資料,需要的朋友可以參考下
2023-06-06
這篇文章主要介紹了JavaScript基礎(chǔ)教程之a(chǎn)lert彈出提示框?qū)嵗?本文重點在于講解了JavaScript基本語法、基本使用方法,需要的朋友可以參考下
2014-10-10