JS : 面向对象-属性判断-call()-apply()-bi

面向对象

• 类，原型，实例三者打交道
• 类里面存放的都是私有属性和方法
• 原型prototype上存的都是公有的属性和方法
• 类里面的this都指向实例
• 类里面的this跟var没有任何关系，var是用来预解释的
• 类里面会自动帮我们创建和返回this

对象：属性 和 方法

写面向对象的小窍门

• 把全局变量都作为私有属性
• 把全局函数都作为公有方法
• 面向对象中的this，永远执行实例

属性判断：判断某个属性，是否在某个对象上

• in 公有+私有："attr" in obj => true / false
• hasOwnProperty 是否为私有: fl.hasOwnProperty('attr')=>true / false
• hasPubProperty 是否为公有(不是系统提供的，是自己写的)
  • 思路：必须是元素身上的属性，并且不是私有属性

  function hasPubProperty(attr,obj){
      if(attr in obj && !obj.hasOwnProperty(attr)){
          return attr;
      }
  }
  

• isPropertyOf 判断是否在原型链上：obj1.isPropertyOf(boj2)

循环遍历

• for...in...循环：只能遍历自己给对象添加的私有属性+公有属性，不能遍历对象的系统属性
• hasOwnProperty和propertyIsEnumerable，都可以遍历自己定的私有属性，不能遍历公有属性和系统自带的属性

关于Object和Function之间的关系

• 对象的老大 Object
• 函数的老大 Function
• Object是Function的爹
• Function是Object这个基类的爹
• Object.prototype是Function.prototype的爹
  • 所有的对象，都可以使用Object.prototype上的方法
  • 但是，只有函数数据类型，才能使用Function。prototype的方法，因为所有函数数据类型是Function这个类的实例

函数的三种角色

• 普通函数->作用：预解释 作用域链 上级作用域 代码从上到下执行
• 类->作用：类 原型 实例 原型链
• 对象->作用：跟普通的对象一样， 都可以添加属性和方法

Function.prototype

• Function.prototype虽然是个匿名函数，但是他具有普通prototype一样的功能

call apply bind

• fa.call():有两类参数
  • 第一个参数：用来改变call前面函数中this关键字的指向
  • 从第二个参数开始：给call前面的函数从左到右，一个个的传参
  • call改完this，传完参数之后，函数会“立即执行”
• fa.apply():有两个参数 -> 跟call功能一样，但是传参形式不同
  • 第一个参数：用来改变apply前面函数中this关键字的执行
  • 第二个参数(数组)：也是给apply前面的函数从左到右，一个个的传参
• fa.bind():预处理机制
  • 参数跟call一样
  • bind()给前面的函数，改完this，传完参后，不会立即执行，只会返回一个函数的定义阶段；
    • 在需要的地方调用

this小总结

• 当元素身上的事件被触发的时候，会执行一个函数，函数中的this执行当前这个元素
• 当函数被调用的时候，看前面是否有点，点前面是谁，this就是谁，没有点，this就是window
• 自执行函数中的this，永远指向window
• 回调函数中的this，一般指向window，但是可以通过thisArg更改this指向
• 构造函数中的this，指向实例；
• 当遇到call、apply、bind的时候，以上规则全失效，他们三个就是用来更改this指向的

继承

• call继承：子类只继承父类“私有”的属性和方法，不继承公有

<script>
    function F(){
        this.x = 100;
        this.y = 200;
    }
    F.prototype.a = 111;
    F.prototype.showX = function(){};
    var f1 = new F;
    console.dir(f1);
    function Son(){
        F.call(this);
    }
    var s1 = new Son;
    console.dir(s1);
</script>

• 拷贝继承：子类只继承父类“公有”的属性和方法，不继承私有

<script>
    // 通过此方法继承的公有在第一个__proto__上
    function extend(obj1,obj2) {
        for(var attr in obj2){
            obj1[attr] = obj2[attr];
        }
        return obj1;
    }
    function F() {
        this.x = 100;
        this.y = 100;
    }
    F.prototype.a = 123;
    F.prototype.showX = function(){};
    var f1 = new F;
    console.dir(f1);
    function S(){}
    extend(S.prototype,F.prototype);
    var s1 = new S;
    console.dir(s1);
</script>

• 原型链继承：子类把父类私有和公有的属性和方法，都放在自己的prototype上

<script>
    //通过此方法继承，公有在__proto__找到的__proto__上
   function extend(obj){
        function Tmp() {}
        Tmp.prototype = obj.prototype;
        return new Tmp;
    }
    function F(){
        this.x = 100;
        this.y = 200;
    }
    F.prototype.a = 111;
    F.prototype.showX = function(){};
    var f1 = new F;
    console.dir(f1);
    function S(){};
    S.prototype = new F;
    var s1 = new S;
    console.dir(s1);
</script>

• 混合式继承：call继承+拷贝继承

    // 最后S继承的属性位置和F一样
    function extend(obj1,obj2) {
        for(var attr in obj2){
            obj1[attr] = obj2[attr];
        }
        return obj1;
    }
    function F() {
        this.x = 100;
        this.y = 100;
    }
    F.prototype.a = 123;
    F.prototype.showX = function(){};
    var f1 = new F;
    console.dir(f1);

    function S(){
        F.call(this);
    }
    extend(S.prototype,F.prototype);
    var s1 = new S;
    console.dir(s1);

• 寄生式组合继承

    function setCreat(obj){
        function Tmp(){}
        Tmp.prototype = obj.prototype;
        return new Tmp();
    }
    function F() {
        this.a = 1;
        this.b = 2;
    }
    F.prototype.c = 3;
    F.prototype.d = function () {};
    var f1 = new F;
    console.dir(f1);

    function Son(){
        F.call(this);
    }
    Son.prototype = setCreat(F);
    var s1 = new Son;
    console.dir(s1);

可视区的宽度和高度

• 宽度：document.documentELement.clientWhidth || document.body.clientWidth
• 高度：document.documentElementlientHeight || document.body.clientHeight