手写系列

90 阅读1分钟

一 函数系列

1、实现call、实现apply 、实现bind

function sayName1(){ 
name='gg'
money='1'
console.log("我是"+this.name)}

let students2 ={
name='caomei'
money='10'
sayName2(){ console.log("我是"+this.name)}
}

let students3 ={
name='caomei'
money='100'
sayName3(Age,sex){ console.log("我是"+this.name+年龄+Age+性别+sex)}
}

let students4={
    name='timi'
    money='1000'
}

sayName1.call(obj1)
students2.sayName2.call(obj1,23,'男')
students3.sayName3.call(obj1,23,'男') 会直接调用。
student3.sayName3.apply(obj1,[23,'男'])  会直接调用。
let save_fn =Students.sayName3.bind(obj1,23,'男') save_fn()。不会直接调用,可以多次调用。
function myfunc1(){
    this.name = 'Lee';
    this.myTxt = function(txt) {
        console.log( 'i am',txt );
    }
}
 
function myfunc2(){
    myfunc1.call(this);
}
 
var myfunc3 = new myfunc2();
myfunc3.myTxt('Geing'); // i am Geing
console.log (myfunc3.name);	// Lee

知识点1: this是动态的。谁调用函数,this指向谁。

解析1:sayName1 和sayName2都是函数都可以调用里面的方法。但我想让其他对象obj1也调用里面的方法。 虽然obj1是写在括号里面的,可以这么解读。 1、sayName1函数改变了this的指向。 2、或者是obj1对象调用了sayName方法。

解析2:call、apply,bind

实现call :

二 对象系列

1、实现instancof

2、实现new

3、实现object.create

4、实现继承

5、实现一个浅拷贝,一个深拷贝

6、单例模式

三 数组系列

1、实现map。reduce

2、数组扁平化

四 闭包系列

1、实现一个防抖、节流

五 异步系列

1、异步:使用settimeout模仿setInterval

2、异步:Promise

六 BOM、DOM系列

1、实现一个路由

2、事件系列 事件一个拖拽

七 Vue系列

1、Vue双向数据绑定

八、网络系列

Ajax