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 表示當(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>
這里會發(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ǔ)的值給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)文章
這篇文章主要介紹了微信小程序關(guān)鍵字變色實現(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
countup.js實現(xiàn)數(shù)字動態(tài)疊加效果
這篇文章主要為大家詳細(xì)介紹了countup.js實現(xiàn)數(shù)字動態(tài)疊加效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
JavaScript統(tǒng)計字符串中每個字符出現(xiàn)次數(shù)完整實例
這篇文章主要介紹了JavaScript統(tǒng)計字符串中每個字符出現(xiàn)次數(shù)的方法,以完整實例形式分析了JavaScript針對字符串中字符的遍歷操作相關(guān)技巧,需要的朋友可以參考下2016-01-01
JavaScript實現(xiàn)點擊改變圖片形狀(transform應(yīng)用)
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)點擊改變圖片形狀，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了如何在微信小程序中存setStorage,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
5 cool javascript apps...2007-03-03
bootstrap fileinput 上傳插件的基礎(chǔ)使用
這篇文章主要介紹了bootstrap fileinput 上傳插件基礎(chǔ)使用，重點是把界面做得更加友好，更好的增加用戶體驗。對bootstrap fileinput知識感興趣的朋友通過本文一起學(xué)習(xí)吧2017-02-02
本篇文章主要介紹了js和jquery中獲取非行間樣式的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
別踩白塊是一款音樂類休閑游戲，游戲的玩法不難，只需跟著音樂的節(jié)奏點中對的方塊即可。本文將用JavaScript實現(xiàn)這一經(jīng)典游戲，感興趣的可以了解一下2022-05-05
不間斷橫向滾動想必大家在很多場合都有見過吧，本文也使用DIV+CSS+JS實現(xiàn)一個，感興趣的你可以參考下哈，希望對你學(xué)習(xí)有所幫助2013-03-03