上篇回顧

一.js作業原理

1.設計初衷

2.單執行緒

3.異步

4.JS同步模式

5.異步模式

6.js垃圾回識訓制

垃圾回收原因：

解決記憶體泄漏的方法：

回收方式：

變數被視為垃圾的情況：

變數不被視為垃圾的情況：

二.物件

1.如何創建物件

1.字面量方式

2.建構式方式

2.呼叫物件屬性及方法

3.如何洗掉、添加、修改物件屬性

4.如何遍歷物件

5.物件型別轉換

1.轉為布爾型別

2.轉為字串型別

3.轉為數值型別

4.重寫toString方法與valueOf方法

6.在物件中的檢測驗性和方法

1.檢測驗性方法

2.檢測物件是否在同一個原型鏈中

7.如何設定物件原始屬性

1.設定某一物件的某一原始屬性：Object.definePropertype()

2.一次設定一個物件的多個原始屬性 Object.definePropertys()

3.查看物件某個屬性的原始屬性 Object.getOwnPropertyDescriptor()

8.構造器屬性

9.值傳遞與參考傳遞(址傳遞)

10.物件序列化

1. 常規轉換

2. 轉換為json字串

3. 轉換為查詢字串

上篇回顧

一.js作業原理

1.設計初衷

js設計初衷為運行在瀏覽器端的腳本語言（主要就是操作dom）

2.單執行緒

（若為多執行緒可能會為多個執行緒同時操作一個dom，導致bug頻出）

執行的代碼執行緒只有一個，任務量大執行任務需要排隊，如果某一個任務執行時間很長，那便會出現阻塞的問題，會導致用戶體驗差，為了解決阻塞問題，就出現了異步的方式，

3.異步

一般有兩種情況使用異步：

setTimeOut（倒計時）某些功能需要等待多少時間后執行；

Ajax請求通常也視為異步（請求資料時，資料回傳時間不確定）；

4.JS同步模式

5.異步模式

6.js垃圾回識訓制

垃圾回收原因：

記憶體中存在一些不再需要的變數，這些變數會產生垃圾，如果不處理便會一直積壓，會影響到用戶體驗，也會造成記憶體泄露，所以為了解決記憶體泄露，js就有了垃圾回識訓制

解決記憶體泄漏的方法：

間隔的不定期的尋找不再使用的變數并釋放

回收方式：

標記清除（在變數生成時會打上標記，之后會觀察變數是否需要，不需要時便會清除）

參考技術

變數被視為垃圾的情況：

沒有被參考；多個物件相互參考形成倍訓

變數不被視為垃圾的情況：

有具體的參考關系（閉包：函式內部含有函式，內部函式參考外部變數）

全域變數（隨時會被使用，時刻待命）

function test（）{
    //在函式功能體中每一次執行完畢后，不被參考的變數會被銷毀
   var num = 0；
   console.log(++num);
}
test();//1
test();//1
test();//1

二.物件

js中萬物皆為物件

字串，布爾，數值皆為物件，它們都可以呼叫物件，即呼叫物件原始方法toString（通過原型鏈進行呼叫），其實是在我們Object物件中，它們之所以可以呼叫物件，是因為它們三種型別也是通過物件方法創建的，null、undefined比較特殊，不能呼叫原始方法toString

var str = 'xioaming';
str.toStrong()；//可以直接呼叫是因為在呼叫時js會自動進行裝箱的操作，
//裝箱：即自動使用包裝器String（）將str轉換為物件，然后再使用tostring方法呼叫
//裝箱后便會通過拆箱來回傳字串
var str1=new String('xioahong');//回傳一個物件型別的字串
console.log(str,str1);//xiaoming   [String: 'xioahong']

1.如何創建物件

1.字面量方式

var stu = {//通過大括號來創建，括號內放置物件的描述(屬性)和功能（方法）
        name:'xiaoming',
        height:180,
        weight:60,
        cook(){//方法,可以有多個
            console.log(this.name+'會做飯');
            //通過this指向本物件，加點屬性名即可呼叫物件的某個屬性
        },
}

2.建構式方式

使用Object或者使用自定義建構式來初始化物件(例如Student)

var stu2 = new Object();
stu2.name="xiaohong";
stu2.height=160;
stu2.weight=50;
stu2.sayHellow=function(){
    console.log(this.name+' say hello')
}
stu2.sayHellow();//xiaohong say hello

2.呼叫物件屬性及方法

訪問物件屬性

點表示法，右側必須是以屬性名稱命名的簡單識別符號

person.name

中括號表示法

中括號中必須是一個計算結果為字串的運算式，可以通過變數訪問屬性，如果屬性名中含語法錯誤的字符，或者屬性名使用的是關鍵字或保留字，可以使用中括號

person["first name"]

//訪問屬性的方式
console.log(stu.name);
console.log(stu['name'])
//[]內必須為字串，不加‘’時會被視為變數，然后全域查找這個變數

//方法呼叫
stu.cook();

3.如何洗掉、添加、修改物件屬性

洗掉屬性只能洗掉自定義屬性，不能洗掉繼承過來的屬性

當添加物件中沒有的屬性時為新增屬性，當物件有時，便為修改屬性

//洗掉
delete stu.height;
//新增
stu.height='180';
//修改
stu.height='170';

4.如何遍歷物件

/物件如何進行for  in 遍歷
//能被for in陳述句列印的屬性稱為可列舉屬性（默認情況下自定義的屬性都是可列舉的）

//不可列舉屬性：js中基本包裝型別的原型屬性是不可列舉的，如Object, Array, Number等
// var num = new Number();
//     for(var pro in num) {
//         console.log("num." + pro + " = " + num[pro]);
//     }
// 它的輸出結果會是空，這是因為Number中內置的屬性是不可列舉的，所以不能被for…in訪問到，

for (k in stu){//in的左側為屬性的鍵，右邊為需要遍歷的物件，里面有多少屬性就列印多少次
    console.log(stu.k);//呼叫失敗，不加括號被認為是變數
    console.log(stu[k]);//呼叫成功
//代表物件屬性的鍵，即name，weight，height等屬性名的統稱
//鍵的右側即為值，所以name：‘xm’稱為鍵值對
}

5.物件型別轉換

1.轉為布爾型別

// Object型別到Boolean型別
//空物件也可以直接轉
var obj={};
console.log(Boolean(obj));//true

// 除了空參考(null)會轉換為false，其他都被轉換為true

var obj = {
	name:"briup",
	age:12
};
console.log(Boolean(obj));//true

2.轉為字串型別

// Object型別轉換為String型別
console.log(obj.toString());//[object Object]
console.log(String(obj));//[object Object]

3.轉為數值型別

// Object型別轉換為Number型別
//如果沒有重寫valueOf，轉數值型別會回傳NaN,若重寫則優先呼叫valueOf
var obj = {
	name:"briup",
	age:12,}
console.log(Number(obj));//NaN

4.重寫toString方法與valueOf方法

//重寫一個物件toString（）；
var obj = {
	name:"briup",
	age:12,
	toString:function(){
	return this.name+"--"+this.age;
    }
};
console.log(obj.toString());//briup--12
console.log(String(obj));//briup--12
//重寫toString方法后，包裝器會自動呼叫toString，然后獲取toString的值并回傳
//所以在呼叫方法時要注意是否有重寫toString方法


// valueOf()   toString()
/*
1.兩個方法都為物件的原始方法
2.valueOf為物件原始值，通常不會顯示的呼叫，通常由js自動在后臺呼叫
3.toString本身作用就是做字串的轉換，也會進行自動呼叫
4.如果只重寫了valueOf()或者toString()方法，
無論是運算還是顯示都呼叫該方法，并將回傳值用Number()轉換，
5.如果兩個方法都重寫了，運算時優先呼叫valueOf()，
并將回傳值用Number()轉換，進行顯示時優先呼叫toString（）
6.如果兩個方法都沒有重寫，則回傳NaN
*/ 

var obj = {
	name:"briup",
	age:12,
	toString:function(){
		return "100";
	},
	valueOf:function(){
		return 10;
	}
};

console.log(obj+2);//12
console.log(Number(obj));//10

var obj = {
	name:"briup",
	age:12,
	toString:function(){
		return "100";
	},
}
console.log(obj+2);//1002 字串型別的數值
console.log(Number(obj));//100

//可以通過valueOf實作累加,每次呼叫obj時，valueOf都會被呼叫
//因為num在valueOf中被參考，所以不會被垃圾回識訓制回收
var obj = {
    num:1,
    valueOf:function(){
        return this.num++
    }
}
console.log(obj==1);//true
console.log(obj==2);//true
console.log(obj==3);//true

6.在物件中的檢測驗性和方法

1.檢測驗性方法

//檢測驗性方法
//in 關鍵詞 檢測某個屬性是否是某個物件自有屬性或者繼承屬性，回傳布爾型別（true或false）
//hasOwnProperty(PropertyName)   檢測某個屬性是否是某個物件自有屬性，繼承的屬性不行
//propertyIsEnumerable()   檢測某個屬性是否是某個物件自有屬性，且可列舉
var obj  = {
    name:'xm'
}
console.log('name' in obj);//true
console.log(obj.hasOwnProperty('name'));//true
console.log(obj.propertyIsEnumerable('name'));//true
console.log(obj.hasOwnProperty('hhh'));//false 沒有的就回傳false

2.檢測物件是否在同一個原型鏈中

原型鏈是一種關系,是實體物件和原型物件之間的關系,這種關系是通過原型(proto)來聯系的，

//檢測物件是否在同一個原型鏈中（同一個家族，有層次，逐級向下）
//isPrototypeOf(object) 檢測一個物件是否存在與另一個物件的原型鏈上，
//在就回傳true反之false（原型的指向） 檢查傳入的物件的原型 
//instanceof  檢測一個物件是否是某個建構式的實體（new）
var str = new String('hh');
console.log(str instanceof String);//true
console.log(str instanceof Object);//true 沿著原型鏈一直向上找

function Animal(){}//自定義一個函式
var dog1 = new Animal();
console.log(dog1 instanceof Animal);//true
console.log(dog1 instanceof Object);//true 無論是什么物件它的頂層都是object

console.log(Animal.prototype.isPrototypeOf(dog1));//true
console.log(Object.prototype.isPrototypeOf(dog1));//true
function Dog(){}
var dog2 = new Dog();
console.log(Animal.prototype.isPrototypeOf(dog2));//false 不在一條原型鏈中
Dog.prototype = new Animal();//原型鏈繼承,將子類建構式的原型屬性，指向父類的實體
//new animal相當于建構式的父親，而animal相當于他的家族，
//之所以指向他而不是指向animal，是因為生它的是他的父親而不是家族
var dog2 = new Dog();
console.log(Animal.prototype.isPrototypeOf(dog2));//true

7.如何設定物件原始屬性

1.設定某一物件的某一原始屬性：Object.definePropertype()

//設定一個物件的原始屬性
//Object.defineProperty 只能設定某一個物件中的某一個屬性的原始屬性
var obj = {
	name:'xm',
	age:12,
	sex:'nan'
}
Object.defineProperty(obj,'name',{
	configurable:false,//原始屬性 默認可以被洗掉，false即不可被洗掉
	enumerable:false,//原始屬性  默認可以被列舉  false即不可以列舉
	writable:false,//原始屬性   默認可以被修改   false即不可以修改
	value:'lisi'
})
console.log(obj);
console.log(obj.name);//可以呼叫，但因為不可列舉，所以在node中不展示
delete obj.name;//不可被洗掉
obj.name = 'xm';//不可以修改
console.log(obj.name);//{ age: 12, sex: 'nan' } lisi
for(var k in obj){
	console.log(obj[k]);
}//不可列舉

2.一次設定一個物件的多個原始屬性 Object.definePropertys()

//一次設定物件的多個原始屬性
//Object.defineProperties
Object.defineProperties(obj,{
	age:{
		configurable:false
	},
	sex:{
		configurable:false
	}
})

3.查看物件某個屬性的原始屬性 Object.getOwnPropertyDescriptor()

//想知道某個屬性的原始屬性 Object.getOwnPropertyDescriptor()
var res = Object.getOwnPropertyDescriptor(obj,'name');
console.log(res);
// {value: 'lisi',writable: false,enumerable: false,configurable: false }

8.構造器屬性

可以重寫自定義屬性set與get方法

在物件中，我們可能會設定一些比較奇怪的屬性 _num、這種屬性我們稱為構造器函式，這種屬性我們不希望直接通過外部訪問 obj_num，我們希望自己去控制這個屬性的訪問邏輯，即obj_num可以訪問到，并且會對它進行一些邏輯改變

var obj = {
	_num:0
}
//obj_num可以訪問到，且會回傳數字：0
//構造器屬性：可以重寫自定義屬性set與get方法
Object.defineProperty(obj,'num',{
//當我們沒有設定這兩個屬性時，默認是隱式呼叫，如果設定了則會呼叫你設定的方法
	set(num){
		this._num = num
	},//在num的值被設定時，呼叫
	get(){
		return '數字：'+this._num
	}//在num的值被獲取時，呼叫
})

console.log(obj.num);//數字：0
obj.num=5;
console.log(obj.num);//數字：5

9.值傳遞與參考傳遞(址傳遞)

基本資料型別的變數：

可以直接操作保存在變數中的實際的值

引數傳遞的時候傳遞的是實際值

參考資料型別的變數：

不能直接操作物件的記憶體空間，實際上是在操作物件的參考，可以為參考型別變數添加屬性和方法，也可以改變和洗掉其屬性和方法，

引數傳遞的時候傳遞的是參考地址，

10.物件序列化

物件序列化是指將物件的狀態轉換為字串，也可以反序列化，將字串還原為物件函式，RegExp,Error物件，undefined值不能序列化和反序列化，

JSON.stringify(obj) 將物件序列化為Json字串,只能序列化物件可列舉的自有屬性

JSON.parse(jsonStr) 反序列化

1. 常規轉換

obj.toString()

2. 轉換為json字串

JSON.stringify(obj)

//用戶輸入資訊
var user_info = {
	username:'zs',
	password:'123321',
	age:'13'
}
//登錄介面需要json格式的資料
//JSON.stringify(obj)
var j_str = JSON.stringify(user_info);//{"username":"zs","password":"123321","age":"13"}
console.log(j_str);//{"username":"zs","password":"123321","age":"13"}
// 回傳json字串，是一種有規則的字串
//得到json字串如何轉回物件
var user_info2 = JSON.parse(j_str)//反序列化
console.log(user_info2);//{ username: 'zs', password: '123321', age: '13' }
console.log(user_info2.username);//zs

//自定義json字串反序列化為物件
var str = '{ "username": "zs"," password": "123321", "age": 13 }';
var str_obj = JSON.parse(str);
console.log(str_obj.age);//zs 13

3. 轉換為查詢字串

var qs = require('querystring')

qs.stringify(obj)

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/299998.html

標籤：其他

上一篇：HTML第一篇

下一篇：微軟要給我30萬美元的額外獎勵，被我拒了！

零基礎快速掌握JavaScript（3）js作業原理、物件

上篇回顧

一.js作業原理

1.設計初衷

2.單執行緒

3.異步

4.JS同步模式

5.異步模式

6.js垃圾回識訓制

垃圾回收原因：

解決記憶體泄漏的方法：

回收方式：

變數被視為垃圾的情況：

變數不被視為垃圾的情況：

二.物件

1.如何創建物件

1.字面量方式

2.建構式方式

2.呼叫物件屬性及方法

3.如何洗掉、添加、修改物件屬性

4.如何遍歷物件

5.物件型別轉換

1.轉為布爾型別

2.轉為字串型別

3.轉為數值型別

4.重寫toString方法與valueOf方法

6.在物件中的檢測驗性和方法

1.檢測驗性方法

2.檢測物件是否在同一個原型鏈中

7.如何設定物件原始屬性

1.設定某一物件的某一原始屬性：Object.definePropertype()

2.一次設定一個物件的多個原始屬性 Object.definePropertys()

3.查看物件某個屬性的原始屬性 Object.getOwnPropertyDescriptor()

8.構造器屬性

9.值傳遞與參考傳遞(址傳遞)

10.物件序列化

1. 常規轉換

2. 轉換為json字串

3. 轉換為查詢字串