2018/03/31 JavaScript学习日记

1.闭包使用规则
同一个闭包机制可以创建多个闭包函数出来，他们彼此没有联系，都是独立的。并且每个闭包可以保存自己个性化的信息。
2.闭包案例 数组元素的创建

  <script type="text/javascript">
    var arr = new Array();
     for (var i = 0; i <4 ; i++) {
       arr[i] = f1(i);
     }
      function f1(n){
        function f2(){
          console.log(n);
        }return f2;
      }
 arr[3]();
 arr[0]();
arr[1]();
arr[2]();
  </script>

3.闭包案例–事件操作

  <script type="text/javascript">
window.onload = function(){
  var lis = document.getElementsByTagName('li');
  for (var i = 0; i < lis.length; i++) {
  //  lis[i].onmouseover = function(){
      //this.style.backgroundColor = "pink";
  //    lis[i].style.backgroundColor = "lightblue";
  //  }
  //  lis[i].onmouseout = function(){
    //  lis[i].style.backgroundColor = "";
    lis[i].onmouseover = over(i);//闭包
    lis[i].onmouseout = out(i);//闭包
}
function over(n){
  function f2(){
    lis[n].style.backgroundColor = "lightblue";
  }
  return f2;
}
function out(n){
  function f2(){
    lis[n].style.backgroundColor = "";
  }
  return f2;
}
}
  </script>

4.面向对象
JS里，没有类的概念，可以直接创建一个对象（或通过函数）出来，对象可以有默认成员，后期也可以给对象丰富成员出来。
创建对象

• 字面量方式创建
  var obj = {名称：值，名称：值，…}

  <script type="text/javascript">
    var dog = {};
    console.log(dog);

    var cat = {color:'gray',age:3,climb:function(){console.log('在爬树')}};
//对象访问成员：对象.成员名称 或 对象【成员名称】
    console.log(cat);
    console.log(cat.color);
    console.log(cat['age']);
    cat.climb();

    //给对象丰富成员
    //对象.名称 = 值；
    //对象[名称] = 值；
    cat.sex = "gong";
    console.log(cat);
      </script>

• 构建函数创建对象
  var obj = new 函数名称()

  <script type="text/javascript">
  function Animal(nm){
    //以下两个成员是每个被实例化对象拥有的“默认成员”
    //this代表调用函数的当前对象  window.xx
    this.height = 120;
    this.color = "black";
    this.name = nm;
  }
var pig = new Animal('荷兰小猪');//会使Animal函数发生自动调用
console.log(pig);
</script>

• Object方式创建对象
  var obj = new Object();

  <script type="text/javascript">
 var tiger = {color:'yellow and black'}
 console.log(tiger);
 //以上tiger对象通过输出可以看出，其构造器是Object，如果采用new函数的方式实例化
 //就可以是 var tiger = new Object();
 var cat = new Object(); //不能i姐定义默认成员
 cat.leg=4;
 console.log(cat);
</script>

5.对象在内存分配
与对象有关系的内存空间：

• 栈空间
  存放的数据大小较小，一般大小固定的信息适合存放在该空间，例如 整型/Boolean/对象的名称（引用）
  var dog = new Animal(); //dog就是名称
• 堆空间
  该空间存储的数据比较多，空间较大，一版数据长度不固定的信息都要在该空间存放，例如：string/array/对象实体；
  var dog = new Animal(); // new Animal()就是对象实体
• 数据空间
  该空间存放常量、类的静态属性
• 代码空间
  存放函数体代码、方法体代码
  6.对象调用其它函数或方法
  函数：

  <script type="text/javascript">
 var mingzi = "加菲猫";
function getInfo(){
  console.log(this.mingzi+"在爬树");
}
var cat = {mingzi:'波斯猫'}

//给cat丰富一个成员方法，通过getInfo的另一个引用对该方法进行赋值即可
cat.express = getInfo;
cat.express();
</script>

方法：

 <script type="text/javascript">
var cat = {mingzi:'波斯猫',eat:function(){console.log(this.mingzi+'在吃鱼')}};
var tiger = {mingzi:'东北虎',act:function(){console.log('猛虎下山')}};
//使得tiger也会去调用eat方法
//给tiger丰富一个成员那个发，通过getInfo 另一个用用对该方法进行赋值即可
tiger.chi = cat.eat;
cat.eat();
tiger.chi();
</script>

tip:给程序每创建一个新变量，就增加变量污染的一层风险。call和apply使得函数执行的时候可以控制变量污染的风险。
call()方式使得对象调用其它对象或函数
构造函数与普通函数没有区别
7.封装
JS封装只体现public、private
public 公开的，在构造函数里通过this关键字声明的成员都是公开的，内外部都可以调用
private 私有的 在构造函数里声明局部变量，就是私有成员
8.继承
JS中：构造函数可以继承另外一个对象，构造函数实例化出来的对象除了本身成员外还会拥有被继承对象的成员
原型继承关键字：prototype

  <script type="text/javascript">
var cat = {minzgi :'kitty',climb:function(){console.log(this.mingzi+'在爬树')}};
 function Tiger(){
   this.color = "yellow";
   this.leg = 4;
   this.cat = "猛虎下山";
 }
 Tiger.prototype = cat;
 var north = new Tiger();
 console.log(north);
</script>

实现原型继承
函数.prototype.成员名称 = 值； //继承单一成员
函数.prototype = 对象； //继承一个对象