1.Object.definePorperty
2.js的執(zhí)行機制
- js是單線程的
-
js的事件循環(huán)(Event Loop)是js的執(zhí)行機制
image.png
3. js繼承(原型繼承,借用構(gòu)造函數(shù)繼承,組合繼承(原型繼承+借用構(gòu)造函數(shù)))
function Person(){
this.name = "xiaoju";
this.age = 18;
this.sex = "男"
}
function Student(){
this.score = 18;
}
Student.prototype = new Person(); // 原型繼承,無法設(shè)置參數(shù)
var s1 = new Student();
console.log(s1);
function Animal(species, color) {
this.species = species;
this.color = color;
}
Animal.prototype.sayHi = function(){
console.log(this.name)
}
function Cat(species, color, score) {
Animal.call(this, species, color, score); // 借用構(gòu)造函數(shù),方法的繼承借用構(gòu)造函數(shù)繼承不了
this.score = score;
}
let instance = new Cat("人類", "green", 100);
alert(instance.species);
alert(instance.color);
function Animal(species, color) {
this.species = species;
this.color = color;
}
Animal.prototype.sayHi = function(){
console.log(this.name)
}
function Cat(species, color, score) {
Animal.call(this, species, color, score);
this.score = score;
}
Cat.prototype = Animal.prototype; // 借用構(gòu)造函數(shù)繼承,可以繼承原型的方法
Cat.constructor = Cat;
Cat.prototype.exam = function(){
console.log("考試);
}
let instance = new Cat("人類", "green", 100);
let instance = new Animal("貓","brone"); // 通過Cat.prototype = Animal.prototype的訪問可以實現(xiàn)Animal也可以訪問Cat原型的方法,唯一不便的就是所有的實例的原型都共享同樣的方法
__________修改后___________
Cat.prototype = new Animal(); // 這樣的話Cat實例就是單獨繼承父類型的方法,也有自己獨立的方法
原型圖.png
4.##### 函數(shù)聲明與函數(shù)表達式
// 函數(shù)聲明,存在函數(shù)聲明提升
alert(sum(10,11);
function sum(a,b){
return a+b;
}
// 函數(shù)表達式
alert(sum(a,b); // 報錯. sum
var sum = function(a,b){
return a+b;
}
call,apply,bind的使用
var obj ={
0:100,
1:10,
2:20,
3:30,
length:4
}
Array.prototype.push.call(obj,30); // 將數(shù)組的方法用在對象上面
Array.prototype.splice.call(obj,0,2);
console.log(obj);
________bind______
var obj = {
name: "xiaoju",
exam: function(){
setInterval(function(){
console.log(this.name);
}.bind(this),1000);
}
}
obj.exam(); // bind可以使this指向調(diào)用詞法作用域,
求數(shù)組的最大元素
var arr = [2,3,4,5];
Math.max(arr[0],arr[1],arr[2]);
Math.max.apply(Math,arr);
Math.max.apply(null,arr);
Math.call(Math,arr[0],arr[1],arr[2]);
附:判斷一個對象是不是數(shù)組
var obj = {name:"23",age:18};
console.log(Object.prototype.toString.call(obj) === '[Object Array]'); // false
________另一種_______
var obj = {name:"23",age:18};
console.log(Array.isArray(obj)); // fasle
高階函數(shù)
- 函數(shù)作為參數(shù)
深拷貝與淺拷貝
深拷貝與淺拷貝的最大區(qū)別在于深拷貝改變拷貝后的值，其原來的值也會改變歉嗓。當然深拷貝與淺拷貝只針對引用類型這樣的復(fù)雜類型剂桥。
// 淺拷貝
let obj = {
name: "xiaoju",
age: 23,
hobby: ["photography", "cooking", "sking"],
dog: {
name: "小A",
age: 2
}
}
// let temp = obj;
let temp = {};
for (key in obj) {
if (obj.hasOwnProperty(key)) {
temp[key] = obj[key]
}
}
temp.hobby[0] = "xiaoshitou"; // 這里對拷貝后對象中數(shù)組進行修改
temp.age = 24; // 這里對拷貝后對象中的一般類型的值進行修改
console.log(temp);
//age: 24；// 拷貝后的一般類型的值發(fā)生改變
// dog: {name: "小A", age: 2}
// hobby: (3) ["xiaoshitou", "cooking", "sking"] // 改變拷貝后對象里面的數(shù)組的值
// name: "xiaoshitou"
—————我是華麗的分割線——————
console.log(obj);
//age: 23 // 而原來的對象的一般類型的值不會發(fā)生改變紊扬，所以深拷貝只是針對與引用類型的值
// dog: {name: "小A", age: 2}
// hobby: (3) ["xiaoshitou", "cooking", "sking"] // 原來的對象的數(shù)組的值也會改變。因為它們指向的是同一塊內(nèi)存地址
// name: "xiaoju"
那么如何進行深拷貝呢
function deepCopy(obj, objCopy) {
var copy = {};
for (var prop in obj) {
let temp = obj[prop];
if (temp instanceof Object) {
objCopy[prop] = {};
deepCopy(temp, objCopy[prop]); // 用遞歸實現(xiàn)引用類型的值進行多層次的拷貝
} else if (temp instanceof Array) {
objCopy[key] = [];
deepCopy(temp, objCopy[prop])
} else {
objCopy[prop] = obj[prop];
}
}
}
var obj = {
name: "nanlan",
age: 23,
hobby: ["photography", "skating", "drawing"],
eaxm: {
project: "computer",
time: "60"
}
}
var obj1 = {};
deepCopy(obj, obj1);
obj1.hobby[0] = "playing"
obj1.eaxm.project = "science";
console.log(obj); // 拷貝后的對象數(shù)組和對象均發(fā)生改變，不會影響原來的對象
// name: "nanlan",
// age: 23,
// hobby: ["photography", "skating", "drawing"],
// eaxm: {
// project: "computer",
// time: "60"
// }
為多個相同的元素做批處理的方法
<ul id="list">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
<script>
function loadTree(parent,callback){
for(var i = 0; i<parent.children.length;i++){
var child = parent.children[i];
callback(child);
// loadTree(child);
}
}
var dom = document.getElementById("list");
loadTree(dom,function(element){
console.log(element.innerText)
});
正則表達式
test()
var reg = /ab[a-z]/; // 這里可以寫為 new RegExp('ab[a-z]','i'); // i 表示忽略大小寫斧抱，g匹配全局兄朋。
var str = 'abd';
console.log(reg.test(str)); // 返回一個true 或者是false
exec()
var str = '張三：2500,李四：3000掐禁，王五：5000';
var reg = /\d+/gi;
var content = reg.exec(str);
console.log(content); // 返回匹配的結(jié)果,只匹配一次
test()
var str = '張三：2500,李四：3000，王五：5000';
var reg = /\d+/g;
console.log(str.match(reg)); // 返回匹配的結(jié)果颅和，可以匹配多次
貪婪模式與惰性模式
*+是貪婪模式傅事，后面加個？就是惰性模式
貪婪模式——在匹配成功的前提下峡扩，盡可能多的去匹配：從字符串的最前面開始匹配蹭越，如果不匹配就從最后刪除一個，直到匹配成功為止
惰性模式——在匹配成功的前提下教届，盡可能少的去匹配：從字符串的最前面開始匹配响鹃，如果不匹配就加一個，直到匹配位置
js模塊化
好處
- 避免命名沖突
- 更好的分離
- 高復(fù)用高可維護性
