简单理解javascript原型&函数节流&函数防抖

简单理解javascript原型

参考资料：https://www.kancloud.cn/wangfupeng/zepto-design-srouce/173681

---

总结的三句话

1. 每个函数都有一个prototype属性

2. 所有通过函数 new 出来的东西，这个东西都有一个 __proto__ 指向这个函数的 prototype

• prototype （显式)原型
• __proto__隐式原型

3. 当一个对象自身没有找到方法是，会从__proto__原型上去找

函数节流(throttle)和防抖(debounce)

函数节流

一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。

应用场景

• DOM 元素的拖拽功能实现（mousemove）
• 搜索联想（keyup）
• 计算鼠标移动的距离（mousemove）
• Canvas 模拟画板功能（mousemove）
• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）

实现

function throttle(fn, delay) {
    // 记录上一次触发的时间
    var lastTime = 0
    return function() {
        // 记录当前函数触发时间
        var nowTime = Date.now()
        if(nowTime - lastTime > delay) {
            fn.apply(this)
            // 同步时间
            lastTime = nowTime
        }
    }
}

函数防抖(debounce)

防抖函数：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

实现

function debounce(fn, delay) {
    // 记录上一次的延时器
    var timer = null
    return function() {
        //清除上一次的延时器
        clearTimeout(timer)
        timer = setTimeout(function() {
            fn.apply(this)
        }, delay)
    }
}

应用场景

• 每次 resize/scroll 触发统计事件
• 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

复习 call、apply、bind

• apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
• apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
• apply 、 call 、bind 三者都可以利用后续参数传参；
• bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

运用场景

实现继承

function Animal(name) {
  this.name = name;
  this.showName = function () {
    console.log(this.name);
  }
  }
function Cat(name) {
  Animal.call(this, name); 
  }
var cat = new Cat('Black Cat');
cat.showName(); 

数组追加

var array1 = [1 , 2 , 3, 5];
var array2 = ["xie" , "li" , "qun" , "tsrot"];
Array.prototype.push.apply(array1, array2);
console.log(array1);

获取数组中的最大值和最小值

var num = [1,3,5,7,2,-10,11];
var maxNum = Math.max.apply(Math, num);
var minNum = Math.min.apply(Math, num);
console.log(maxNum); 
console.log(minNum); 

将伪数组转化为数组

var fakeArr = {0:'a',1:'b',length:2};
var arr1 = Array.prototype.slice.call(fakeArr);
console.log(arr1[0]); 
var arr2 = [].slice.call(fakeArr);
console.log(arr2[0]); 
arr1.push("c");
console.log(arr1); 

保存this变量

var foo = {
    bar : 1,
    eventBind: function(){
        var _this = this ;
        $('.someClass').on('click',function(event) {
            console.log(_this.bar);     
        });
    }
    }
var foo = {
    bar : 1,
    eventBind: function(){
        $('.someClass').on('click',function(event) {
            console.log(this.bar);      
        }.bind(this));
    }
    }