關於前端知識點總結（乾貨）
今天系統的整理下我理解的前端的知識點 以及如何貫穿的將這些串聯起來 主要是js部分
首先js最不能離開的一句話就是 萬物皆物件
首先是變數---
function Tellname（name，age）{
this.name=name;
this.age=age;
//return this;
}
var zhangsan=new Tellname('zhangsan',20); //初始化一個建構函式例項
var a={ } // var a=new Object()
var b=[]; //var b=new Array(); 對應的建構函式
instanceof判斷一個函式是否是一個變數的建構函式
-----------------------------------------------------------------------------------------------------------------
原型鏈規則
1：所有引用型別（物件 陣列 函式）,都具有物件特性 即可自由擴充套件屬性（除了null之外）
2：所有的引用型別（物件 陣列 函式）都有一個_proto_（隱式原型）屬性 屬性值是一個普通的物件
var arr=[]; a.name="test"; console.log(arr._proto_);
3：所有的函式 都有一個prototype屬性 屬性值也是一個普通物件
4:所有的引用型別（物件 陣列 函式），_proto_屬性值指向它的建構函式的“prototype”屬性值
arr._proto_===Array.prototype
5:當檢視得到一個物件的某個屬性時，如果這個物件本身沒有這個屬性 那麼會去他的_proto_（即他的建構函式的prototype）中去尋找
//建構函式
function Foo(name,age){
this.name=name
}
Foo.prototype.alertName=function(){
alert(this.name)
}
//建立一個例項
var f=new Foo（“liuting”）;
f.printName=function(){
console.log(this.name)
}
//測試部分
f.printName（）;// liuting
f.alertname（）；// alert("liuting")
----------------------------------------------------------
關於原型鏈
//建構函式
function Foo(name,age){
this.name=name
}
Foo.prototype.alertName=function(){
alert(this.name)
}
//建立一個例項
var f=new Foo（“liuting”）;
f.printName=function(){
console.log(this.name)
}
//測試部分
f.printName（）;// liuting
f.alertname（）；// alert("liuting")
f.toString（）；// 要去f._proto_._proto_中查詢
//如上圖 原型鏈
下面對於instanceof方法
f instanceof Foo // true
f instanceof Foo //
1:如何判斷一個變數是陣列型別
2：寫一個原型鏈繼承的例子
3：描述new一個物件的過程
4：zepto原始碼中如何使用原型鏈
寫一個原型繼承的例子
function Animal（）{
this.eat=function(){
console.log("animal eat")
}
}
function Dog(){
this.bark=function(){
console.log("dog bark")
}
}
Dog.prototype=new Animal();
//
var jinmao=new Dong();
console.log(jinmao);
描述new一個物件的過程 ---建構函式例項化的過程
function Foo（name，age）{
this.name=name;
this.age=age;
}
var f=new Foo("liuting")
建立一個新物件
tis指向這個新物件
執行程式碼 即對這個this賦值
返回this
----------------------------------------------------------------
寫一個實際開發中原型繼承的例子
<script>
function Elem(id){
this.id=document.getElementById(id);
}
Elem.prototype.html=function(val){
var elem=this.elem;
if(val){
elem.innerHtml=val;
return this //鏈式操作
}else{
return elem.innerHTML
}
}
Elem.prototype.on=function(type,fn){
var elem=this.elem;
elem.addEventListener(type,fn)
}
var div1=new Elem("div1");
//console.log(div1);
div1.html('<p>hello liuting</p>');
div1.on('click',function(){
alert("div1");
})
</script>