这一篇文章主要是讲述一些有关js的小知识点。因为我也不是很精通哪一方面只能把自己知道的一点点写出来。取名大杂烩也是这意思吧，既然是道菜那么就来尝尝我的手艺吧。
第一道菜
1.首先，我想说一下事件绑定。 事件绑定我们都知道有：on + 'type'的事件绑定还有addEventListener的事件绑定。
- 在以前因为各种原因导致我们在不同的浏览器上面实现一样的功能出现了兼容的写法，首先我们先来看看事件绑定的兼容写法。
function bindEvent(obj, type, handle) { if(window.addEventListener){ obj.addEventListener(type, handle, false); } if(window.attachEvent){ // IE obj.attachEvent('on' + type, handle); } obj['on' + type] = handle; } 复制代码 - 事件解除除了
on + 'type'其他的就是怎么绑定怎么解除。function delEvent(obj, type, handle) { if(window.removeEventListener){ obj.removeEventListener(type, handle, false); } if(window.detachEvent){ // IE obj.attachEvent('on' + type, handle); } obj['on' + type] = null; } 复制代码 - 顺带提一下IE与其它浏览器获取target和event的兼容方式。
function handle(e){ let event = e || window.event; // IE let target = e.target || e.srcElement; } 复制代码
第二道菜
2.这个知识点我们来说一下继承。
- 说到js的继承，我是学后端的在C ++ 、Java里面都跟js的继承不一样，所以一开始不好理解也觉得怪怪的。虽然ES6形式上有点像吧。那我们先来看看js一开始的继承。
function Father(){ this.a = 1; } Father.prototype.show = function () { console.log(this.a); } function Son(){ Father.call(this); } let son = new Son(); console.log(son.a); console.log(son.show()); 复制代码
- 我们再来看看第二种
function Father(){ this.a = 1; } Father.prototype.show = function () { console.log(this.a); } function Son(){ Father.call(this); } Son.prototype = Father.prototype; //多了这一行 let son = new Son(); console.log(son.a); console.log(son.show()); 复制代码
- 我们再来看看第三种
function Father(){ this.a = 1; } Father.prototype.show = function () { console.log(this.a); } function Son(){ Father.call(this); } function F(){}; //借用中间层来防止Son改变Father的原型 F.prototype = Father.prototype; Son.prototype = new F(); Son.prototype.constructor = Son; //改变Son的constructor let son = new Son(); console.log(son.a); console.log(son.show()); console.log(son.constructor); 复制代码
function Father(){ this.a = 1; }这个是不是构造函数？如果说是那你就错了，因为你思维固定了。我们都说构造函数开头首字母大写但那只是人为的规定并不是语法。还有如果有人问你
this是谁，你可以放肆的告诉他，你没调用我知道是谁啊。
new只是一个操作符，任何函数都能通过new来执行，并不只是构造函数，只不过我们认为
new之后的都是构造函数。
- 那你知道
new的时候发生了什么吗？我们一般都说四步走- 首先创建一个新的对象。
- 改变这个对象的this
- 改变这个对象的原型
- 返回这个对象 我们试着写一写
function myNew(){ let obj = {}; let Constructor = arguments[0]; obj.__proto__ = Constructor.prototype; Constructor.apply(obj, arguments); return obj; } let a = myNew(Son); console.log(a); 复制代码
class Father {
constructor(){
this.a = 1;
}
show(){
console.log(this.a);
}
}
class Son extends Father {
constructor(){
super();
}
}
let son = new Son();
console.log(son.a);
console.log(son.show());
复制代码class这种实现方式只是一个‘语法糖’,当我们用
typeof Son的时候我们发现他是一个
function,其实它就是一个函数只不过更加语义化了，而且里面定义的方法其实是定义在了它的原型上面，我们输出一下
Father看看。
第三道菜
3.我们再来介绍一下call、bind、apply
- 它们都是用来改变this的，只不过有一些小的差别。
- call和apply除了传参方式的不同外，没有不同的地方。
- bind返回一个函数，call、apply立即执行。
演示我觉得应该不用了吧，因为我不是在写文档，那么我们说一些什么呢，就说说怎么模拟实现吧。我这里用的是ES6的语法，我只是觉得这样写比较简单但总体思路不变。 下面以这个为例：
var a = 3;
var obj = {
a: 1
}
function show(g) {
console.log(this.a, g);
}
复制代码- call
Function.prototype.callh = function(context){
let args = [...arguments].slice(1); //首先获取到传递的参数
context.fn = this; // 获取当前的调用者，并添加一个方法
context.fn(...args); // 传入参数
delete context.fn; //删除新增的函数
}
show.callh(obj, 2);
复制代码- apply
Function.prototype.applyh = function(context){
let args = arguments[1]; // 跟call一样，只不过apply传进来的是数组，所以arguments[1]指的是后面的参数
context.fn = this;
context.fn(...args);
delete context.fn;
show.applyh(obj, [2]);
}
复制代码- bind（重点）
// 简易版
Function.prototype.bindh = function(context){
let args = [...arguments].slice(1);
let that = this;
return function (argument) { // bind返回一个函数
let args2 = [...arguments].slice(0);
that.call(context, ...args.concat(args2));
}
}
show.bindh(obj)(5);
复制代码因为原型的原因，我们来改进一下。
Function.prototype.bindh = function(context){
let args = [...arguments].slice(1);
let that = this;
function bnd(){}
let fn = function (argument) {
let args2 = [...arguments].slice(0);
return that.call(this instanceof fn ? this : context, ...args.concat(args2));
}
bnd.prototype = this.prototype;
fn.prototype = new bnd();
return fn;
}
复制代码这样就行了。
第四道菜
4.再来讲一讲this
- this一直是我们困惑的问题，有时候能看懂但代码一多，调用一多，我们就蒙了，下面我来简单介绍一下。
- 在默认情况下this指向window（非严格模式）
- 谁调用指向谁
- call.apply
- bind
- new
我想到的差不多就这几种吧，你或许会发现其实是按this绑定的优先级升序排序的。如果你看懂了bind的模拟实现也许会知道为什么bind的优先级会高于call、apply。我觉得弄清楚这些this应该不是多大的问题吧，来一段代码看看。
var a = 3;
var obj = {
a: 1,
fn(){
console.log(this.a);
}
+
}
function show() {
console.log(this.a);
}
show(); //3
obj.fn(); //1
show.call(obj); // 1
show.apply(obj); // 1
show.bind(obj)(); // 1
show.bind(window).call(obj); //3 bind优先级高，跟绑定顺序没区别
复制代码希望这些菜能满足您的胃口，但愿也能给您填饱一些肚子。我以后还会继续努力提高自己的厨艺，希望尝到这个菜的人都会喜欢。