js的數(shù)據(jù)類型
-
stringnumberbooleanundefinednullobjectsymbol -
object中包含了functionArrayDate等
js判斷類型方法
js中判斷類型主要有三種方式，分別為：typeof instanceof Object.prototype.toString.call()
// typeof
typeof "abc" === "string" //true
typeof [] === "array" //false
typeof function () {} === "function" //true
//typeof 的返回值有：string, number, boolean, undefined, function, object
//instanceof
[] instanceof Array //true
"abc" instanceof String //true
//Object.prototype.toString.call()
Object.prototype.toString.call("abc") //[object String]
Get請(qǐng)求和Post請(qǐng)求的區(qū)別
Get請(qǐng)求：
- 參數(shù)拼接在url上
- 瀏覽器可以產(chǎn)生緩存
- 瀏覽器對(duì)get請(qǐng)求的url長(zhǎng)度有限制
- 一般用于獲取數(shù)據(jù)
Post請(qǐng)求：
- 數(shù)據(jù)包裝在請(qǐng)求體中發(fā)送
- 一般用于提交表單
- 要比get安全性高些
閉包
- 什么是閉包？
閉包簡(jiǎn)單點(diǎn)說(shuō)靶擦，就是返回一個(gè)函數(shù)咆爽，而這個(gè)函數(shù)保存了父作用域蕴掏，此時(shí)父作用域不會(huì)被清除患朱，此時(shí)就形成了一個(gè)閉包揽惹。閉包的作用很多，比如某些時(shí)候需要緩存一個(gè)結(jié)果彩掐，實(shí)現(xiàn)一個(gè)私有變量等等。 - 閉包實(shí)現(xiàn)的單例模式
const Sington = (function () {
let instance = null;
function F() {
if (instance) return instance;
instance = this;
}
F.getInstance = function () {
if (!instance) instance = this;
return instance;
}
return F;
})();
類的繼承
// 說(shuō)到繼承灰追，就需要一個(gè)基類
function Human(name, age) {
this.name = name;
this.age = age;
}
Human.prototype.say = function () {
console.log(`I am ${this.name}, ${this.age} years old.`);
}
- 原型鏈繼承
function Man() {
this.gender = "man";
}
Man.prototype = new Human("a man", 30);
Man.prototype.constructor = Man;
new Man().say(); //I am a man, 30 years old.
new Man().gender; //man
- 構(gòu)造方法繼承
function Woman(name, age) {
Human.call(this, name, age);
this.gender = "woman";
}
new Woman("Tina", 26).say(); //此處報(bào)錯(cuò)堵幽，因?yàn)闃?gòu)造方法繼承，只是繼承了屬性弹澎，而沒(méi)有繼承原型上的方法
//所以需要定義say方法
Woman.prototype.say = function () {
console.log(`I am ${this.name}, ${this.age} years old ${this.gender}.`);
}
new Woman("Tina", 26).say(); //I am Tina, 26 years old woman.
- 原型鏈和構(gòu)造方法組合繼承
/** 1.原型鏈繼承
* 弊：
* a.不方便傳遞構(gòu)造函數(shù)參數(shù)
* b.如果父類中含有引用類型的屬性朴下，則子類實(shí)例對(duì)其修改會(huì)對(duì)其他實(shí)例有影響
* c.子類的原型包含父類的一個(gè)實(shí)例，有點(diǎn)耗費(fèi)資源
* 利：
* 既能繼承屬性又能繼承原型
*
* 2.構(gòu)造函數(shù)繼承
* 弊：
* a.只能繼承屬性苦蒿，不能繼承原型
* 利：
* 方便傳參殴胧；不存在引用修改影響問(wèn)題；不存在浪費(fèi)資源問(wèn)題
*/
// 組合繼承刽肠，結(jié)合兩者優(yōu)勢(shì)溃肪，當(dāng)然也會(huì)存在兩者缺陷
function People(name, age) {
Human.call(this, name, age);
}
People.prototype = new Human();
People.prototype.constructor = People;
new People("Tom", 34).say(); //I am Tom, 34 years old.
- 寄生繼承
function Personal(name, age) {
Human.call(this, name, age);
}
(function () {
function F() {} //中間宿主
F.prototype = Human.prototype;
Personal.prototype = new F();
Personal.prototype.constructor = Personal;
})();
new Personal("Jet", 99).say(); //I am Jet, 99 years old.
bind，apply音五，call
/** 三個(gè)方法都是改變當(dāng)前環(huán)境中的this指向
* call, apply 調(diào)用后立即執(zhí)行惫撰，但是參數(shù)不一樣，第一個(gè)參數(shù)都是指定的this躺涝，其后的參數(shù)都是需要傳遞的參數(shù)厨钻，call通過(guò)逗號(hào)分隔，而apply傳入數(shù)組
* bind 調(diào)用后返回一個(gè)一個(gè)待執(zhí)行的方法坚嗜，需要再次主動(dòng)調(diào)用夯膀。參數(shù)值傳遞只需要指定的那個(gè)this
*/
var vn = "window";
function F() {
this.vn = "F";
}
var f = new F();
function say(name, ex) {
console.log(name + " say: " + this.vn + " is current this, " + ex);
}
//直接調(diào)用
say("Tom", "hahaha"); //Tom say: window is current this, hahaha
// call, apply
say.call(f, "Tom", "hahaha");
say.apply(f, ["Tom", "hahaha"]);
// bind
var say2 = say.bind(f);
say2("Tom", "hahaha");
實(shí)現(xiàn)一個(gè)深度克隆
var t = {
a: 1,
b: [1,2],
c: [{h: true, i: "abc"}],
d: {
x: 1,
z: function () {}
},
e: [1, {a:1}]
}
function copyDeep(obj) {
var result = obj instanceof Array ? [] : {};
for (var o in obj) {
if (obj[o] instanceof Array) {
result[o] = copyDeep(obj[o]);
} else if (o instanceof Object) {
result[o] = copyDeep(obj[o]);
} else {
result[o] = obj[o];
}
}
return result;
}
實(shí)現(xiàn)一個(gè)將原生的ajax封裝成promise
const PromiseAjax = function (url) {
return new Promise((resolve, rejected) => {
const httpRequest = new XMLHttpRequest();
httpRequest.open("GET", url);
httpRequest.send();
httpRequest.onreadystatechange = text => {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
//處理成功
resolve(text);
}
if (httpRequest.readyState === 4 && httpRequest.status !== 200) {
//處理失敗
rejected(text);
}
}
});
}
實(shí)現(xiàn)一個(gè)私有變量，用getName方法可以訪問(wèn)苍蔬，不能直接訪問(wèn)
- Object.defineProperty方式
var test = {
id: 123,
name: 'Jaimor'
}
Object.defineProperty(test, 'name', {
});
- 自定義變量形式
function User(id) {
this.id = id;
const name = 'Jaimor';
this.getName = function () {
return name;
}
}
const test = new User(123);
console.log(test.id, test.getName(), test.name); //123, Jaimor, undefined
- 閉包方式
const Person = (function () {
let name = 'Tom';
return function (id, n) {
this.id = id;
name = n;
this.getName = _ => name
}
})();
箭頭函數(shù)與普通函數(shù)的區(qū)別
- 普通函數(shù)：有原型诱建，可以通過(guò)new創(chuàng)建一個(gè)實(shí)例，有自己的
this綁定碟绑。 - 箭頭函數(shù)：
a) 箭頭函數(shù)是匿名函數(shù)俺猿，不能作為構(gòu)造函數(shù)茎匠，不能使用new。
b) 箭頭函數(shù)不綁定arguments押袍，可以使用...reset诵冒。
c) 箭頭函數(shù)不綁定this，會(huì)捕獲其所在的上下文的this作為自己的this值谊惭，同時(shí)callapplybind也不能改變this汽馋。
d) 箭頭函數(shù)沒(méi)有原型屬性。
