[TOC]
## 1.原型鏈
JavaScript 規定，所有對象都有自己的原型對象（prototype）。一方面，任何一個對象，都可以充當其他對象的原型
所有對象皆有__proto__屬性,它指向它的原型對象
## 2.繼承
如何改變this關鍵字的指向call,apply,bind
1.函數作為普通函數調用,this指向window
~~~
function show(){
console.log(this);
}
show(); //window
~~~
~~~
var name = "cheng"
function show(){
console.log(this.name);
}
show();
~~~
### Call
~~~
var name = "cheng"
function show(){
console.log(this.name);
}
var zhang = {
name:"張三"
}
show.call(zhang);
~~~
### Apply
~~~
var name = "cheng"
function show(){
console.log(this.name);
}
var zhang = {
name:"張三"
}
show.apply(zhang);
~~~
Call和apply之間的區別
如果要傳遞參數,apply跟數組
eg:
~~~
function show(a,b){
console.log(this.name);
console.log(a+b)
}
var zhang = {
name:"張三"
}
//show.call(zhang,1,2)
show.apply(zhang,[1,2]);
~~~
### Bind
bind后函數不會執行，而只是返回一個改變了上下文的函數副本，而call和apply是直接執行函數
## demo01
~~~
<div id="text">div</div>
<button id="btn">btn</button>
var id = "world"
var btn = document.getElementById("btn");
var text = document.getElementById("text");
btn.onclick = function(){
console.log(this.id); //world
}.bind(this);
~~~
## demo02
~~~
var name = "li";
var cheng = {
name:"cheng"
}
var test = function(){
console.log(this.name)
}.bind(cheng);
test();
~~~
## demo03定時器
Eg：在函數內部的定時器中
~~~
<div id="text">div</div>
<button id="btn">btn</button>
<script>
var id = "world"
var btn = document.getElementById("btn");
var text = document.getElementById("text");
btn.onclick = function(){
setTimeout(function(){
console.log(this.id); //world
},1000)
}
</script>
~~~
## 解決方案01 bind
~~~
<div id="text">div</div>
<button id="btn">btn</button>
<script>
var id = "world"
var btn = document.getElementById("btn");
var text = document.getElementById("text");
btn.onclick = function(){
setTimeout(function(){
console.log(this.id);
}.bind(this),1000)
}
</script>
~~~
## 解決方案 02 self
~~~
var id = "world"
var btn = document.getElementById("btn");
var text = document.getElementById("text");
btn.onclick = function(){
var self = this;
setTimeout(function(){
console.log(self.id);
},1000)
}
~~~
## 解決方案 03 箭頭函數
~~~
<button id="btn">btn</button>
<script>
var id = "world"
var btn = document.getElementById("btn");
var text = document.getElementById("text");
btn.onclick = function(){
setTimeout(()=>{
console.log(this.id)
},1000)
}
</script>
~~~
## 3.繼承實現
~~~
var Person = function(name,age){
this.name = name;
this.age = age;
}
Person.prototype.see = function(){
console.log(this.name+"愛看片")
}
function Teacher(name,age){
Person.call(this,name,age);
}
Teacher.prototype = new Person();
var cheng = new Teacher("cheng",20);
cheng.see();
~~~
