js高级进阶

1.Object.definePorperty

2.js的执行机制

1. js是单线程的

2. js的事件循环(Event Loop)是js的执行机制

   
   image.png

3. js继承(原型继承,借用构造函数继承,组合继承(原型继承+借用构造函数))

  function Person(){
       this.name = "xiaoju";
       this.age = 18;
       this.sex = "男"
     }
     function Student(){
       this.score = 18;
     }

     Student.prototype = new Person(); // 原型继承,无法设置参数
     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); // 借用构造函数,方法的继承借用构造函数继承不了
        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; // 借用构造函数继承,可以继承原型的方法
 Cat.constructor = Cat;
 Cat.prototype.exam = function(){
     console.log("考试);
  }
 let instance = new Cat("人类", "green", 100);
 let instance  = new Animal("猫","brone"); // 通过Cat.prototype = Animal.prototype的访问可以实现Animal也可以访问Cat原型的方法,唯一不便的就是所有的实例的原型都共享同样的方法

__________修改后___________
Cat.prototype = new Animal();  // 这样的话Cat实例就是单独继承父类型的方法,也有自己独立的方法

原型图.png

4.##### 函数声明与函数表达式

// 函数声明,存在函数声明提升
alert(sum(10,11);
function sum(a,b){
return a+b;
}
// 函数表达式
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); // 将数组的方法用在对象上面
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指向调用词法作用域,

求数组的最大元素

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]);

附:判断一个对象是不是数组

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

高阶函数

1. 函数作为参数

深拷贝与浅拷贝

深拷贝与浅拷贝的最大区别在于深拷贝改变拷贝后的值，其原来的值也会改变。当然深拷贝与浅拷贝只针对引用类型这样的复杂类型。
// 浅拷贝

 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";   // 这里对拷贝后对象中数组进行修改
        temp.age = 24; // 这里对拷贝后对象中的一般类型的值进行修改
        console.log(temp);
        //age: 24；// 拷贝后的一般类型的值发生改变
        // dog: {name: "小A", age: 2}
        // hobby: (3) ["xiaoshitou", "cooking", "sking"] // 改变拷贝后对象里面的数组的值
        // name: "xiaoshitou"
—————我是华丽的分割线——————
        console.log(obj);
        //age: 23   // 而原来的对象的一般类型的值不会发生改变，所以深拷贝只是针对与引用类型的值
        // dog: {name: "小A", age: 2}
        // hobby: (3) ["xiaoshitou", "cooking", "sking"] // 原来的对象的数组的值也会改变。因为它们指向的是同一块内存地址
        // 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]); // 用递归实现引用类型的值进行多层次的拷贝
                } 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); // 拷贝后的对象数组和对象均发生改变，不会影响原来的对象
        // 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); // 返回匹配的结果,只匹配一次
test()
    var str = '张三：2500,李四：3000，王五：5000';
        var  reg = /\d+/g;
        console.log(str.match(reg)); // 返回匹配的结果，可以匹配多次

贪婪模式与惰性模式
*+是贪婪模式，后面加个？就是惰性模式
贪婪模式——在匹配成功的前提下，尽可能多的去匹配：从字符串的最前面开始匹配，如果不匹配就从最后删除一个，直到匹配成功为止
惰性模式——在匹配成功的前提下，尽可能少的去匹配：从字符串的最前面开始匹配，如果不匹配就加一个，直到匹配位置

js模块化

好处

1. 避免命名冲突
2. 更好的分离
3. 高复用高可维护性