JavaScript進階知識點——函式和物件詳解
我們在上期內容中學習了JavaScript的基本知識點，今天讓我們更加深入地瞭解JavaScript
JavaScript函式
JavaScript函式和Java函式是有一部分相似的，所以學習起來也會相對簡單
基本構造
1.直接構造
//function代表函式標誌，name為函式名稱，引數可有可無
function name( 引數 ) {
//...
return;
}
2.賦值構造
//相當於function為匿名函式，然後匿名函式所得出的值返回給name，因而name可以呼叫function函式
var name = function( 引數 ){
//...
}
注意：
- 在JavaScript中，return是可有可無的
- 當存在return時，執行到return，結束函式，並返回該值
- 當不存在return時，全部執行完畢，結束函式，返回underfined值
呼叫函式方法
當呼叫函式時，直接書寫函式名稱並加上相對應的引數即可
name(引數)；
注意：
- JavaScript可以傳入與之不對應的引數
- 當引數傳入較多，引數進入函式但不代表函式內任意引數，只是單純傳入引數
- 當引數傳入較少，引數進入函式，後面未傳入的引數在函式內部以underfined的形式存在
函式引數argument和rest
argument代表函式中傳入進來的所有引數，是一個陣列
我們可以在函式中使用：
function name( ) {
//...
console.log(arguments[0])，
console.log(arguments[1])，
//...
}
rest代表函式中傳入進來的未定義的引數，需要提前在函式中定義
我們同樣可以在函式中使用：
var names = function(name,age,...rest){
//...
console.log(name);
console.log(age);
for(var value of rest){
console.log(value)
}
}
程式碼除錯
我們針對上面所有知識點給出相應程式碼示例：
//我們演示argument
function name( ) {
//...
console.log(arguments[0])
}
//我們演示rest
var names = function(name,age,...rest){
//...
console.log(name);
console.log(age);
for(var value of rest){
console.log(value)
}
}
下面我們在網頁中進行除錯：
name(1,2,3,"胡桃",true)
1
names("胡桃",18,"護膜","魔女")
胡桃
18
護膜
魔女
變數的作用域
對於任何含有變數的語言，作用域是必定存在的
對於JavaScript，var所定義的變數實際上也是存在作用域的
函式體內變數作用域解釋
- 假如在函式體中宣告，則在函式體外不可以使用
function test1() {
var x=1;
x=x+1;
}
x=x+2;//Uncaught ReferenceError: x is not defined
- 如果兩個函式使用了相同的變數名，只要在函式內部，則不產生衝突
function test1() {
var x=1;
x=x+1;
}
function test2(){
var x=1;
x=x+2;
}
- 內部函式可以使用外部函式的成員，但外部函式不能使用內部函式的成員
function test3(){
var x=1;
//內部函式使用外部函式的成員
function indextest(){
var y=1;
x = x+1;
console.log(x);
}
indextest();
//外部函式不可以使用內部函式成員
y=y+1;//Uncaught ReferenceError: y is not defined
}
- 當內部函式變數和外部函式變數重名時，由內向外查詢，就近原則
function test4(){
var x=1;
function indextest() {
var x=2;
console.log(x);
}
indextest();//這裡結果為2
}
良好的變數定義格式
我們在JavaScript函式中定義變數時，常常將所有變數在頭部定義完全，然後在後面使用
function test5(){
//在開頭定義好所有變數
var x=3,y=2,z,name;
//在後面可以隨便使用變數
x=x+2;
z=x+y;
}
全域性變數
全域性變數常常帶有window字首，但預設帶有，所以不需要書寫
window屬於JavaScript下的一個物件，window之下包含我們所定義的全域性變數以及各種函式方法
function test6(){
var x = 1;
//下面所輸出的x均為上方所定義的全域性變數x
console.log(x);
console.log(window.x);
//下面所使用的alert和window.alert具有相同程式碼相同作用
alert(x);
window.alert(x);
}
我們也可以通過重新定義window下的函式方法來更改該函式原有的操作
//在下述操作之後，alert不會產生輸出作用
window.alert = function() {
}
alert("Hello");
注意：
- JavaScript實際上只有一個全域性作用域，任何變數（包括函式），假如沒有在函式作用域內找到，就會向外查詢，若在全域性作用域內均未查詢到，則報錯RefrenceError
區域性變數
在JavaScript的ES5中會出現變數作用域過大導致程式碼衝突的結果：
function test7(){
for(var x=1;x<10;x++){
console.log(x);
}
// 我們希望x的作用域只在for中，但它仍會被帶出for
x=x+1;
}
JavaScript在ES6中加入了新的定義型別let用來定義區域性變數
function test7(){
for(let x=1;x<10;x++){
console.log(x);
}
//x則只在for中有作用
console.log(x);//Uncaught ReferenceError: x is not defined
}
常量Const
在JavaScript的ES6之前，我們定義常量只是採用常識約束：
- 我們假設全大寫字母的變數為常量
- 但實際上是可以修改的
//我們定義PI
var PI = 3.14；
//但我們仍舊可以修改
PI = 3.33；
但在JavaScript的ES6中，提供了const定義型別，它所定義的變數是真正的常量，是允許修改的：
//我們定義PI
const PI = 3.14;
//我們無法修改，下述程式碼報錯
PI = 3.33;
方法的定義和呼叫
方法的物理定義：
- 物件中只存在兩種東西：屬性和方法
- 物件中的函式被我們稱為方法
方法示例
我們給出方法的示例：
var student = {
//物件中包含屬性
name:"胡桃",
//物件中包含方法
sing:function(){
//this指向當前物件的屬性
console.log(this.name + "在唱歌")
}
}
//我們在呼叫方法時，需要帶上物件並且加上（）
student.sing();
This和Apply的區別
我們稍微講解一下物件方法中的This和Apply：
- This：無法指向，只能在物件的方法中出現，並且固定指向自身物件的屬性
- Apply：可以控制this指向，在呼叫含有this的函式時呼叫，第一個引數是物件，後面是所需引數
我們給出案例進行講解：
//首先我們給出一個外部函式來計算年齡：
function getAge(){
//這裡採用了Date內建物件，我們後面會講到，這裡是獲得當前年份
var nowTime = new Date().getFullYear();
return nowTime - this.birth;
}
//我們建立一個物件(直接呼叫getAge，相當於this的使用)
var hutao = {
name:"胡桃",
birth:2002,
age: getAge
}
//我們直接對getAge採用apply方法，使其this指向hutao
//第一個引數是物件，後面均為引數所需值
getAge.apply(hutao,[]);
我們給出網頁端的操作:
//我們需要呼叫age時，是採用的age（）方法
console.log(hutao.age())
20
//這裡採用getAge的apply方法
getAge.apply(hutao,[]);
20
內部物件
JavaScript的內部物件類似於我們Java中的常見類
它們同樣都是由他人創造並存在於JavaScript中，我們可以直接呼叫幫助我們程式設計
標準型別
我們先來介紹一些標準型別便於內部物件的講解
我們先給出一個新的方法，用於分析其型別：
typeof 型別物件
我們給出案例：
typeof 123
'number'
typeof "123"
'string'
typeof true
'boolean'
typeof []
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
Date日期物件
首先我們給出日期物件的定義方法：
var name = new Date();
我們通過日期物件來進行一些方法操作：
| 方法名 | 說明 |
|---|---|
| name.getFullYear() | 返回當前年份 |
| name.getMonth() | 返回當前月份 |
| name.getDate() | 返回當前日期 |
| name.getDay() | 返回當前星期 |
| name.gatHours() | 返回當前小時 |
| name.getMinutes() | 返回當前分鐘 |
| name.getSeconds() | 返回當前秒數 |
| name.getTime() | 返回當前時間到1970 1.1 00：00：00 的毫秒數 |
我們同時提供一些Date物件輸出日期的不同寫法（這裡在網頁示例）：
now = new Date()
Thu Jul 14 2022 13:27:07 GMT+0800 (中國標準時間)
now.toLocaleString()
'2022/7/14 13:27:07'
now.toGMTString()
'Thu, 14 Jul 2022 05:27:07 GMT'
JSON字串
我們先來介紹一下JSON：
- 在早期，所有資料傳輸都採用XML檔案，但後來開始採用JSON傳輸
- JSON是一種輕量級的資料交換格式
- 簡潔和清晰的層次結構使得JSON成為理想的資料交換語言
- 益於人的閱讀和書寫，也易於機器解析和生成，有效地提升了網路傳輸效率
在JavaScript中一切皆為物件，任何JS所支援的型別都是物件
格式：
- 物件都採用{}
- 陣列都採用[]
- 鍵值對都採用 key:value
我先在這裡講解一下JSON的格式，並且給出物件進行對比：
//物件具有物件的形式
var obj = {
name:"萬葉",
eyes:"風"
}
//JSON雖然和物件相似，但實際上是字串，內部所有元素都有"""所包圍
var json = '{"name":"萬葉","eyes":"風"}'
最後我們給出JSON和物件之間的轉換：
var obj = {
name:"萬葉",
eyes:"風"
}
//物件轉化為JSON字串
var jsonUser = JSON.stringify(obj);
//JSON字串轉化為物件
var wanye = JSON.parse('{"name":"萬葉","eyes":"風"}')
物件導向程式設計
首先物件導向程式設計是什麼呢？
- 物件導向都具有一個模板類
- 我們根據模板類來產生物件並對其進行操作
JavaScript的類和物件
JavaScript的物件導向與其他物件導向有一點區別：
//我們先給出一個整體物件（類似於類，但類需要寫有資料）
var Student = {
name:"name",
age:18,
run:function() {
console.log(this.name + "running!")
}
};
//我們建立一個物件
var xiaoming = {
name:"xiaoming"
}
//然後我們讓小明的本源指向Student物件
xiaoming._proto_ = Student;
//下面是網頁測試給出的結果，我們可以看到xiaoming繼承了Student的方法
// xiaoming
// {name: 'xiaoming', _proto_: {…}}
// name: "xiaoming"
// _proto_: {name: 'name', age: 18, run: ƒ}
// [[Prototype]]: Object
但是在ES6版本之後，JavaScript給出了class關鍵字，具體化了類這個概念：
class定義模板：
class name{
//...
}
下面給出class案例：
class Student{
//class配置的constructor方法，用來創造物件的屬性
constructor(name){
this.name = name;
}
//方法直接在下面書寫即可
run(){
console.log(this.name + "running");
}
}
//建立新物件的方法（需要把所需引數寫入）
var yebao = new Student("yebao");
我們給出網頁除錯結果：
yebao
Student {name: 'yebao'}
yebao.name
'yebao'
yebao.run()
4.html:19 yebaorunning
結束語
好的，關於JavaScript的函式和物件我們就介紹到這裡，下一期我們會講解JavaScript的重點BOM和DOM部分。