今天先從一個小案例說起,面向對象的內容已經過去一半,剩下的內容也至關重要 ! 希望幫到你的朋友, 能持續關注更新 !
需求 : 圖書管理操作
- 示例代碼 :
var list = [
{name:"專業主義",author:"大前研一"},
{name:"紅樓夢",author:"曹公子"},
{name:"什么是批判",author:"福柯"},
{name:"十萬個為什么？",author:"作者不詳"}
];
//01 提供構造函數
function BookListManager(){
this.bookList = null;
}
//02 設置原型對象
BookListManager.prototype = {
init:function(arrayList){
this.bookList = arrayList || [];
},
getBookByName:function (name) {
//01 能夠找到該對象，返回
for (var i = 0; i < this.bookList.length; i++)
{
var obj = this.bookList[i];
if (obj.name == name)
{
return obj;
}
}
//02 找不到這個對象，返回null
return null;
},
addBook:function (bookObj){
this.bookList.push(bookObj);
},
updateBook:function (name,author){
var book = this.getBookByName(name); //在原型方法中要調用其它的原型方法需要使用this
book.author = author;
},
removeBook:function (name){
var book = this.getBookByName(name);
var index = this.bookList.indexOf(book); //返回指定對象的索引，如果沒有那么就返回-1
if(index == -1)
{
throw "要刪除的數據不存在！";
}
//刪除對象
this.bookList.splice(index,1);
}
}
//03 創建對象
var p1 = new BookListManager();
var p2 = new BookListManager();
console.log(p1);
console.log(p2);
p1.init([{name:"城堡",author:"卡夫卡"}]);
p2.init([{name:"一分鐘學會H5開發",author:"烏拉烏拉"}]);
console.log(p1);
console.log(p2);
</script>
- 總結 : 這個小Demo就是面向對象編程的示例,自習看代碼的話會不會覺得封裝性很好,以后可以直接拿到項目中應用,而且不用擔心和別的同事的代碼發生沖突.這就是面向對象編程的好處,代碼看起來逼格也很高
嚴格模式
說明
- 在js開發中可以選擇嚴格模式或者是非嚴格模式來進行開發，默認是非嚴格模式的
- 區別：在嚴格模式下，會做更嚴格的檢查，一以前在非嚴格模式下不會報錯或者是可以使用的一些語句在嚴格模式下使用會報錯或者是拋出異常。
- 嚴格模式它本身做了向后兼容：如果是支持嚴格模式的引擎，在檢測到這個字符串的時候，就會在作用域中開啟嚴格模式，如果是不支持嚴格模式的引擎，那么就直接忽略處理
- 建議：推薦以后全部使用嚴格模式。
- 語法 :
"use strict"在提供字符串設置嚴格模式的時候，必須要把字符串寫在當前作用域的最頂端
**
"use strict"注意點 :
1.在書寫字符串的使用雙引號和單引號都可以
2.字符串后面的分號可以省略
3.所有的字符必須全部小寫
4.這個字符串只能擁有10個字符**
使用注意點
- 所有的變量都必須要使用var聲明
- 不能使用delete關鍵字來刪除全局變量
- 函數的形參列表中不能出現同名的參數
- 在對象內部不能出現相同的屬性
- 禁止使用八進制
- 禁止使用with語句
- 禁止使用eval 和arguments作為標識符( 標識符就是不要這讓兩個參數作為變量使用 不然會報錯 !)
- 在函數調用的時候，修正了函數內部this的指向
- 示例代碼 :
<script>
"use strict";
var obj1 = {
name:"張三",
showName:function(){
console.log(this);
}
}
obj1.showName(); //obj1 this--->obj1
var showName = obj1.showName;
showName(); //this丟失的問題 this--->window(非嚴格)|undefined（嚴格）
obj1.showName.call(null);
//在嚴格模式下，函數內部的this綁定誰由第一個參數決定，如果沒有傳遞那么是undefined，如果傳入的值是null，那么綁定的就是null
</script>
- 禁止使用callee | caller
- arguments在函數內部的表現和非嚴格模式不同
1.arguments 接收實參的值
2.值類型&&引用類型的數據作為函數的參數傳遞，在非嚴格模式下，arguments和形參共享一份數據
3.重新設置了形參的值，arguments的值也會發生改變，在嚴格模式下，arguments和形參是獨立的，他們之間沒有關系，修改了形參的值對arguments沒有影響的
- 示例代碼 :
<script>
"use strict";
function funcName(paramStr){
console.log(paramStr);
console.log(arguments[0]);
//重新設置形參的值
paramStr = "測試的字符串";
console.log(arguments[0]);
}
var str = "demoStr";
funcName(str);
function funcName02(obj)
{
console.log(obj);
console.log(arguments[0]);
//重新設置obj的值
obj = {age:20};
console.log(obj);
console.log(arguments[0]);
}
var obj = {
name:"張三"
};
funcName02(obj);
</script>
嚴格模式的作用域
寫在當前作用域的最頂端
作用范圍
- script標簽 只對當前的標簽有影響，僅僅設置當前的標簽為嚴格模式
- 函數內 那么只對當前的函數作用域有效
- 示例代碼 :
<script>
// "use strict"; 位置01 對f1和f2都有效
function f1(){
// "use strict"; 位置02 對f1有效f2無效
//a = 10;
}
function f2(){
// "use strict"; 位置03 對f2有效f1無效
b = 20;
}
f1();
f2();
</script>
作用域
某個變量有( 起 ) 作用的范圍
塊級作用域, 在別的語言里有塊級作用域, 但是在js中沒有塊級作用域
js中的作用域
- script構成了全局作用域
- 在js中函數是唯一一個可以創建作用域的對象
詞法作用域 - 動態作用域
- 詞法作用域：在變量聲明的時候，它的作用域就已經確定了
- 動態作用域：在程序運行的時候，由程序的當前上下文（執行環境）決定的
- js屬于詞法作用域
詞法作用域的訪問規則：
- 先在當前作用域中查找，如果找到就直接使用,如果沒有找到，那么就到上一級作用域中查找，如果還沒有找到那么就重復這個查找的過程，直到全局作用域
變量和函數提升
js的執行順序
- 預解析階段 變量和函數的提升（聲明）
- 具體的執行階段
- 變量和函數的提升
- 示例代碼 :
<script>
console.log(a); //undefined ?
var a = 10;
f1();
function f1(){
console.log("f1");
}
</script>
- 變量和變量同名的情況:后面的變量會把前面的變量覆蓋
- 示例代碼 :
<script>
// var n1 = "n1";
// console.log(n1); //n1
//
// function test(){
// console.log(n1);
// }
//
// test(); //n1
// var n1 = "new n1";
// console.log(n1); //new n1
// test(); //new n1
// 模擬變量和函數的提升
var n1;
function test(){
console.log(n1);
}
var n1;
n1 = "n1";
console.log(n1); //n1
test(); //n1
n1= "new n1";
console.log(n1); //new n1
test(); //new n1
</script>
- 函數和函數同名的情況
- 示例代碼 :
<script>
f1(); //10 ? 20
function f1(){
console.log(10);
}
f1(); //20
function f1(){
console.log(20);
}
f1(); //20
</script>
- 函數和變量同名的情況:可以理解為函數聲明提升而變量的聲明不提升（忽略）
- 示例代碼 :
<script>
console.log(demo); //
var demo = "我是字符串";
function demo(){
console.log("我是函數");
}
console.log(demo); //
//......
var demo;
function demo(){
console.log("我是函數");
}
console.log(demo); //函數
demo = "我是字符串";
console.log(demo); //我是字符串
</script>
<script>
console.log(test); //函數
function test(){
console.log("我是函數");
}
var test = "我是帥哥";
console.log(test); //
///////變量聲明（和函數同名的）不會提升
function test(){
console.log("我是函數");
}
console.log(test); //
var test = "我是帥哥";
console.log(test);
</script>
注意 : 如果是函數的表達式,那么在做函數聲明提升的時候,僅僅只會把var 變量的名稱(函數)提升到當前作用域的最頂端
作用域鏈
- js中函數可以創建作用域
- js中的函數中可以聲明函數
- 函數內部的函數中又可以聲明函數
- 以上,會形成一個鏈式的結構,這個是作用域鏈
- 示例代碼 :
<script>
var a = 10;
function f1(){
function f2(){
var d = "demoD";
}
}
function f3(){
function f4(){
}
var b = "demoB";
function f5(){
var c = "demoC"
}
}
</script>
圖解
**作用域鏈**
