JS 兼容、继承、bind、this

时间 2019-12-01

标签兼容继承 bind 栏目 JavaScript 繁體版

原文原文链接

这一篇文章主要是讲述一些有关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;
}
复制代码
```
下一篇我会详细介绍DOM事件绑定和DOM事件等级。

第二道菜bash

2.这个知识点咱们来讲一下继承。app

说到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());
复制代码

咱们发现拿到了原型上的函数，但这样就是最好的了吗？咱们一块儿来看看。当咱们查看Son的时候发现了一个奇怪的事。

咱们能够看到Son的constructor变成了Father，这是为何呢？由于constructor是原型上的函数，咱们改变了Son的原型，由于Father的constructor是Father因此Son的constructor就变成了Father。并且这种方法咱们改变Son.prototype时Father.prototype也会改变，那这说明咱们的方法仍是不够完美。

咱们再来看看第三种

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);
复制代码

补充：咱们都知道ES6那么他的继承跟咱们的继承有什么区别呢？咱们来看一下ES6的继承。

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());
复制代码

咱们发现是同样的。只不过是这种实现方式更加让人容易理解而且接受尤为是对于习惯了C++/Java之类语言的人。其实 class这种实现方式只是一个‘语法糖’,当咱们用 typeof Son的时候咱们发现他是一个 function,其实它就是一个函数只不过更加语义化了，并且里面定义的方法实际上是定义在了它的原型上面，咱们输出一下 Father看看。

第三道菜函数

3.咱们再来介绍一下call、bind、applyui

它们都是用来改变this的，只不过有一些小的差异。
- call和apply除了传参方式的不一样外，没有不一样的地方。
- bind返回一个函数，call、apply当即执行。

演示我以为应该不用了吧，由于我不是在写文档，那么咱们说一些什么呢，就说说怎么模拟实现吧。我这里用的是ES6的语法，我只是以为这样写比较简单但整体思路不变。下面以这个为例：this

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);
复制代码

但上面bind的方式有一点错误。咱们来看看js里面的bind和咱们的在new以后有什么区别。

上面是js的后面是模拟的。看到了吧。

由于原型的缘由，咱们来改进一下。spa

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;
}
复制代码

这样就好了。prototype

第四道菜

4.再来说一讲this

this一直是咱们困惑的问题，有时候能看懂但代码一多，调用一多，咱们就蒙了，下面我来简单介绍一下。
1. 在默认状况下this指向window（非严格模式）
2. 谁调用指向谁
3. call.apply
4. bind
5. 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优先级高，跟绑定顺序没区别
复制代码

但愿这些菜能知足您的胃口，希望也能给您填饱一些肚子。我之后还会继续努力提升本身的厨艺，但愿尝到这个菜的人都会喜欢。