5个常见的前端手写功能：New、call apply bind、防抖和节流、instanceof、ajax

1. New 关键字：创建一个用户定义的对象类型的实例或具有构造函数的任何对象。

function Person(name) {
    this.name = name;
}
 
var person = new Person('John');

2. Function.prototype.call：调用一个函数，其 this 值可以由 caller 提供。

function greet(message) {
    console.log(this.name + ': ' + message);
}
 
var person = {
    name: 'John'
};
 
greet.call(person, 'Hello'); // John: Hello

3. Function.prototype.apply：调用一个函数，其参数以数组的形式提供。

function greet(message, name) {
    console.log(name + ': ' + message);
}
 
var person = {
    name: 'John'
};
 
var args = ['Hello', person];
 
greet.apply(null, args); // John: Hello

4. Function.prototype.bind：创建一个新的函数，在这个新函数被调用时，其 this 关键字被设置为提供的值，在调用新函数时，前几个参数被提供。

function greet(message, name) {
    console.log(this.name + ': ' + message);
}
 
var person = {
    name: 'John'
};
 
var greetJohn = greet.bind(person, 'Hello');
 
greetJohn(); // John: Hello

5. 防抖 (Debounce)：指定在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发则重新计时。

function debounce(fn, wait) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            fn.apply(context, args);
        }, wait);
    };
}
 
var myEfficientFn = debounce(function() {
    // 实际处理的逻辑
}, 250);
 
window.addEventListener('resize', myEfficientFn);

6. 节流 (Throttle)：指定一定时间内只能触发一次事件。

var throttle = function(func, delay) {
    var prev = Date.now();
    return function() {
        var context = this;
        var args = arguments;
        var now = Date.now();
        if (now - prev >= delay) {
            func.apply(context, args);
            prev = Date.now();
        }
    }
}
 
window.addEventListener('resize', throttle(function() {
    // 实际处理的逻辑
}, 250));

7. instanceof：用于测试构造函数的 prototype 属性是否存在于对象的原型链上。

function Ctor() {}
var obj = new Ctor();
console.log(obj instanceof Ctor); // true

8. AJAX (Asynchronous JavaScript and XML)：在不刷新页面的情况下更新网页数据。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'url', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();