共同点
bind,apply和call都可以改变使用对象的this指向
不同点
1.bind绑定不会立即执行，需要手动调用
2.apply，call绑定函数会立即执行，如果传入的第一个参数是null，undefined则this指向window。apply和call的区别是：apply第二个参数是一个数组，而call从第二个参数起后面传入的都是单个的参数。
手写apply,call,bind
1.手写call
Function.prototype.myCall = function(context){
context = context || window
context.fn = this
let args = [...arguments]
args.shift()
const res = context.fn(...args)
delete context.fn
return res
}
//测试代码
function Apple(){}
Apple.prototype = {
color: 'red',
say: function(){
console.log(`this.color is ${this.color}`)
}
}
const banana = {
color: 'yellow'
}
const apple = new Apple();
apple.say.myCall(banana) // this.color is yellow
// 传入null ，this就指向window, window.color没有值，返回undefined
apple.say.myCall(null) // this.color is undefined
2.手写apply
Function.prototype.myApply = function(context,arr){
context = context || window
context.fn = this
let res = null
if(!arr){
res = context.fn()
}
let args = [...arr]
res = context.fn(...args)
delete context.fn
return res
}
//测试代码
function Apple(){}
Apple.prototype = {
color: 'red',
say: function(a,b){
console.log(`this.color is ${this.color}`)
console.log('a',a,'b',b)
}
}
const banana = {
color: 'yellow'
}
const apple = new Apple();
apple.say.myApply(banana,[1,2])
// this.color is yellow
// a 1 b 2
// 传入null ，this就指向window, window.color没有值，返回undefined
apple.say.myApply(banana,null) // this.color is yellow
// a undefined b undefined
3.手写bind
第一种：借助apply
Function.prototype.myBind = function(){
const _this = this
// 获取第一个参数，要指向的this对象
const firstArg = Array.prototype.shift.call(arguments)
// 获取剩余的参数
const args = Array.prototype.slice.call(arguments)
return function(){
// 获取内部函数的所有参数
const innerArg = Array.prototype.slice.call(arguments)
const lastArg = args.concat(innerArg)
_this.apply(firstArg,lastArg)
}
}
第二种：不借助apply
Function.prototype.myBind = function(){
const _this = this
const context = Array.prototype.shift.call(arguments)
const args = Array.prototype.slice.call(arguments)
return function(){
const innerArg = Array.prototype.slice.call(arguments)
const lastArg = args.concat(innerArg)
context.fn = _this
const resut = context.fn(...lastArg)
delete context.fn
return resut
}
}
4.实现一个new关键字
function Person(){}
function newFun(name,age){
const newObject = new Object()
Person.call(newObject,name,age)
newObject.__proto__ = Person.prototype
return newObject
}
手写节流和防抖
节流
//节流 时间戳
function throttle(fn,delay){
let pre = 0
return function(){
const context = arguments
const _this = this
const now = +Date.now()
if(now - pre > delay){
fn.apply(_this,context)
pre = now
}
}
}
// 节流 定时器
function throttle(fn,delay){
let timer = null
return function(){
const context = arguments
const _this = this
if(!timer){
timer = setTimeout(()=>{
fn.apply(_this,context)
timer = null
},delay)
}
}
}
防抖
function debounce(fn,delay){
let timer = null
return function(){
const args = arguments
const _this = this
clearTimeout(timer)
timer = setTimeout(()=>{
fn.apply(_this,args)
timer = null
},delay)
}
}
排序算法
1.冒泡
function bubbleSort1(arr) {
if (arr.length < 2) {
return arr;
}
// 定义 count 代表执行了趟循环
let count = 0;
// 冒泡排序排的趟数=数组的长度-1
// 第一层 for 循环代表一共排序多少趟
for (let i = 0; i < arr.length - 1; i++) {
count++;
let hasSort = true;
// 第二层 for 循环代表每趟需要比较多少次 每趟比较的次数会减i，因为每趟会将最后排好一个元素,排了多少趟，则代表排好了几个元素
for (let j = 0; j < arr.length - 1 - i; j++) {
// 在大于的时候才会交换，等于的时候不交换，所以冒泡排序属于稳定排序算法，不会对相等两个元素执行交换
// j=>左指针，j + 1=>右指针
if (arr[j] > arr[j + 1]) {
// 只要交换过，则不是有序
hasSort = false;
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
if (hasSort) {
break;
}
}
console.log(`执行了${count}趟循环`);
return arr;
}
2.快排
function qucikSort1(arr){
if(arr.length <= 1) return arr
const pre = arr.splice(0,1)
let left = [],right = []
arr.forEach(item=>{
if(item < pre){
left.push(item)
}else {
right.push(item)
}
})
return qucikSort1(left).concat(pre).concat(qucikSort1(right))
}
qucikSort1([2,4,1,6]) // [1, 2, 4, 6]
