关于前端知识点总结（干货）

今天系统的整理下我理解的前端的知识点 以及如何贯穿的将这些串联起来 主要是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>