1. JavaScript prototype（原型对象）

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法，就像是Java中的Object类。

对于JS而言，因为没有类对象的概念，所以可以借助原型对象实现同一类的不同实例对象复用属性或者方法的效果。

我们可以借助下图所示的方式通过构造器或者实例对象访问我们的原型对象。

需要注意的是，在JS中，原型对象也可能存在原型对象，进而形成所谓原型链的结构，所有对象最终的原型都会到object上。

2. this关键字的使用

在函数中，this表示全局对象，如果是严格模式，this为undefined。
在方法以及构造函数中，this 表示该方法所属的对象或者构造函数创建的对象。
call() 和 apply() 方法可以将 this 绑定到任何对象,空值默认绑定到全局对象；
在事件中，this表示接收事件的元素，但是会存在很多复杂容易混淆的情况。

<button onclick="console.log(this)">click</button>
// 这里的 this 是button元素

--------

<button onclick="say()">click</button>

function say() {
    console.log(this)
}
// 这里的 this 是window,因为上面直接调用了say()函数，所以按照函数的this判断
// html 事件绑定的函数在执行时，有权访问全局作用域中的任何代码。也即我们可以在 html 中可以直接调用 script 标签中定义的函数。

--------

<button onclick="obj.say()">click</button>

let obj = {
	say: function() {
		console.log(this)
	}
}
// 这里的 this 是obj，原理与上面相同

当涉及到DOM操作时，我们可以理解为，无论何种绑定形式，最终都会使this指向我们的事件对象，除非我们用bind()方法强行修改。

<button id="btn">click</button>

let oBtn = document.getElementById('btn');
oBtn.onclick = say; // 这里的 this 是button元素
function say() {
    console.log(this)
}

--------

let obj = {
	say: function() {
		console.log(this)
	}
}
oBtn.onclick = obj.say;
// 这里的 this 也是button元素

oBtn.onclick = null;  
// 删除事件处理程序
// html 上绑定的事件也可以通过这种方式来解绑
--------

oBtn.addEventListener('click', obj.say.bind(obj), false);
// 通过使用bind，为回调函数绑定指定的 this

JavaScript中的原型对象以及this的使用——前端探秘(3)

1. JavaScript prototype（原型对象）

2. this关键字的使用