JavaScript 自定義物件方法彙總
阿新 • • 發佈：2022-01-02
目錄
- 一 使用object建立物件
- 二 使用建構函式建立物件
- 三 字面量建立物件
- 四 this 關鍵字
- this 表示當前物件
- 五 基本資料型別和引用資料型別
- 基本資料型別
- 引用資料型別
- 六 閉包
- 如何理解閉包？
- 閉包的用途
- 閉包的使用
- 七 on
- 基本用法
- 符合屬性
- Json物件的集合
- JSON 操作
一 使用object建立物件
<script>
// 建立物件
var stu = new Object()
// 給物件新增屬性
stu.name='jibu'
stu[9527] = 'jibu' //特殊屬性名使用中括號
// 為物件新增方法
stu.study = function(){
console.log('學習')
}
// 呼叫物件屬性和方法
console.log(stu.name,stu['name'])
//呼叫方法
stu.study()
</script>
二 使用建構函式建立物件
<script>
// 1.定義一個建構函式建立物件
function Student() {
// 物件屬性
this.name = 'jibu'
this.age = 18
//物件的方法
this.study = function() {
console.log('正在學習......')
}
}
// 2. 呼叫建構函式建立物件
var stu = new Student()
console.log(stu.name)
stu.study()
// 定義一個帶引數的建構函式
// 定義一個建構函式建立物件
function Student(name,age) {
// 物件屬性
this.name = name
this.age = age
//物件的方法
this.study = function() {
console.log('正在學習......')
}
}
//呼叫建構函式建立物件
var stu = new Student('tom',18)
console.log(stu.name)
stu.study()
</script>
三 字面量建立物件
var stu = {
name: 'jibu',age: 100,'特殊變數':1111
study: function() {
console.log('正在學習')
},show: function() {
console.log('我叫' + this.name,'年齡:' + this.age)
}
}
console.log(stu.name)
console.log(stu['特殊變數']
四 this 關鍵字
this 表示當前物件
- 函式中的
this,表示呼叫函式的當前物件 - 事件繫結的匿名回撥函式中的
this，表示事件源 - 建構函式中的this,表示將來
new出來的當前物件
示例一
<script>
// 函式中的this，表示函式的呼叫者
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表示事件源 觸發事件的目標元素
}
}
</script>
</head>
<body>
<button id="btn">按鈕</button>
</body>
示例三
<script>
function Student(name,age) {
// 建構函式中this,表示將來new出來的當前物件
this.name = name
this.age = age
}
</script>
五 基本資料型別和引用資料型別
基本資料型別
string,number,boolean,undefined,null
<script>
var a = 5
var b = a
b = 8
console.log(a)
console.log(b)
</script>
建立變數a,b引用a相當於賦值了一份，修改互不影響
引用資料型別
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>
這裡會發現和基本資料型別操作一樣但是結果不一樣會互相影響，
這裡就涉及到了記憶體問題
記憶體分為兩種：
棧記憶體：
基本資料型別的變數和引用資料型別的變數的引用,會儲存在棧記憶體中，存取速度比較快
堆記憶體：
引用資料型別的變數，會儲存在堆記憶體中，存取速度較慢
引用資料型別的變數會儲存在棧裡面(記憶體地址)，其物件會儲存在堆裡面，stu2引用stu1其實就是記憶體地址的引用是一樣的，所有修改的時候結果都是一樣的
基本資料型別的變數和值都是儲存在棧中的，把a的值給b，所有修改互不影響
六 閉包
如何理解閉包？
- 在一個函式內部又定義了一個函式，這個定義在內部的函式就是閉包
- 閉包能夠讀取其他函式內部變數的函式
- 閉包是某個作用域內定義的函式，該函式可以訪問這個作用域的所有變數
- 從作用上來說，閉包就是將函式內部和外部函式連線起來的一座橋樑
閉包的用途
- 在函式的內部，可以讀取到函式內部的變數
- 讓變數的值始終儲存客棧在記憶體中
閉包的使用
<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>
因為迴圈在點選元素按鈕的時候就已經結束了，所有始終獲取的都是最後一個，這就形成了閉包
解決方法一：
不在函式內部定義含，將函式定義在外面，在函式內部呼叫
<script>
function add() {
for (var i = 1; i <= 5; i++) {
var li = createLi(i)
document.getElemenIlyQwXtById('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; //儲存資料
li.onclick = function() {
console.log('點選了第' + this.num + 'li')
}
document.getElementById('myul').appendChild(li)
}
}
</script>
解決方法三：
使用let定義變數
塊級作用域，它所申明的變數所在的區域不會收到外部影響，稱為暫時性死去
<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
Object Notation 是一種輕量級的資料交換格式，用於表示Script物件的一種方式，採用與程式語言無關的文字格式，易於編寫和閱讀，同時也易於解析和生成
基本用法
{“屬性名”:“屬性值”,“屬性名”:“屬性值”…}
注意：
Json結構是由一系列的鍵值對組成，稱為Json物件- 屬性名使用雙引號
- Json和物件字面量的區別：JSON屬性必須使用雙引號，而物件字面量可以不加
符合屬性
<script>
//複合屬性 值為json物件
var user = {
"name": {
"firstName": "ji","lastName": "bu"
},"age": 100
}
console.log(user.name.firstName)
</script>IlyQwX;
Json物件的集合
<script>
//複合屬性 值為json物件
var user = [{
"id": 1,"firstName": "ji","lastName": "bu"
},{
"id": 1,]
//迴圈
for (var i = 0; i < user.length; i++) {
console.log(user[i])
}
</script>
JSON 操作
<script>
//JSon物件轉換成字串
var stu = {
"id": 1,"name": "jibu"
}
console.log(typeof stu)
var str = JSON.stringify(stu);
console.log(typeof str)
// 將字串轉成JSON
var str = '{"id": 1,"name": "jibu"}程式設計客棧'
console.log(typeof str)
var obj = JSON.parse(str)
console.log(typeof obj)
</script>
到此這篇關於JavaScript 自定義物件介紹的文章就介紹到這了,更多相關JavaScript 自定義物件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！