JavaScript高级与面向对象

对象：任何事物都可以看作是对象。

1、面向对象与面向过程的概念

  • 面向过程：凡是自己亲力亲为，自己按部就班的解决现有问题。
  • 面向对象：自己充当一个指挥者的角色，指挥更加专业的对象帮我解决问题。
  • 联系：面向对象仍然离不开面向过程，可以认为它是对面向过程更高一层的封装。

2、创建对象的方式

  •  字面量形式

    var p = {};
p.name = '中国人';
p.age = '500';

  •  构造函数形式 ==> 复用性更强

    function Person(name, age) {
    this.name = name;
    this.age = age;
}
var p = new Person('中国人', 500);
var p2 = new Person('中国人2', 500);

     



3、构造函数


    

  • 

    概念
    

    • 
如果一个函数配合new关键字创建对象，那么这个函数也叫构造函数
      

    1. 构造函数与普通函数本质上是一样的
      2. 

    2. 编写构造函数时，首字母通常会大写，但不是必须的(类似变量驼峰命名法)
      3. 

    

  • 

     返回值特点
    

    • 



    

  1. 如果构造函数没有return语句，那么new它，得到一个新实例
    2. 

  2. 如果构造函数return了一些基本类型数据，那么new它，得到一个新实例
    3. 

  3. 如果构造函数return了一个对象，那么new它，得到return的对象
    4. 



4、类与实例的概念


    

  • 

    类
    

    • 
类是对一些具有相同特征与特性事物的抽象描述
      

    1. 比如动物类的定义是比较抽象的，它抽取了动物与动物之间的相同特征。
      2. 

    2. 同样植物类、哺乳动物类、人类的定义也都是比较抽象的，也是提取他们的共同特征而形成的定义，这就是类。
      3. 

    3. 在js中，可以把构造函数看作是类
      4. 

    

  • 

    实例
    

    • 
实实在在的具体事物就是某个类的实例。
      

    1. 比如我家的旺财，是狗类的实例
      2. 

    2. 我的弟弟妹妹，是人类的实例
      3. 

    3. 在js中，通过构造函数创建的对象就是实例
      4. 



联系：如果把类看作是模子，实例则是模子印出来的东西。


    

  • 

     对象类型
    

    • 
对象的类型就是其构造函数的名字
      

    1. 比如数组是Array类型的对象，日期是Date类型的对象
      2. 

    2. Array和Date就是其构造函数的名字
      3. 

    3. 那么通过Person创建一个实例，那么这个实例就是Person类型的对象。
      4. 



5、 原型


    

  • 原型是一个对象，它的属性可以供其他对象共享
      

    1. js中有很多原型对象，基本每个对象都有属于自己的原型
      2. 

    2. 原型对象的存在可以大大的节省内存开销
      3. 

    • 

  • 

     原型的使用
    

    • 



    

  1. 每个构造函数都有一个prototype属性，可以给其赋值
    2. 

  2. 然后通过构造函数创建的实例就可以共享其属性与方法
    3. 



6、面向对象与面向过程优缺点


    

  • 

    面向对象
    

    • 
缺点
      

    1. 通常比面向过程消耗内存，因为有很多实例要存储
      2. 

    2. 前期开发比较缓慢，但是复用性强，后期开发与维护进度会逐渐加快
      3. 

    优点
      

    1. 变量的管理比较清晰，可读性较高
      2. 

    2. 因为代码与对象间的职责比较清晰，所以后期可维护性和可扩展性也比较高
      3. 

    3. 复用性更强
      4. 

    

  • 

     面向过程
    

    • 
缺点
      

    1. 变量混乱，可读性较差
      2. 

    2. 通常有新需求出现，代码改动比较大，所以可维护性和可扩展性比较差
      3. 

    优点：开发迅速，只要能解决当前问题即可


7、面向对象3大特征


    

  1. 封装性：对象可以把很多属性与方法集中在一起管理，就是js的封装性。
    2. 

  2. 继承性：对象可以使用其原型对象的属性与方法，就是js的继承性。
    3. 

  3. 多态性：js没有多态。如果非要说，那么对象形态、继承关系可以随时被改变，可以认为是js的多态性。
    4. 



8、 面向对象的书写过程


    

  1. 根据需求提取解决该问题所需的对象

      

    • 比如我要逛街，需要一个导购，需要一个保镖，需要一个女朋友
      • 

    

    2. 

  2. 编写每一个对象所对应的构造函数

      

    • 构造函数可以重复性创建实例，因为我可能需要多个保镖 function Person() {}
      • 

    

    3. 

  3. 抽取对象所需的属性

      

    • 就是该对象应该拥有的特征，比如人有名称、年龄、性别、四肢、双眼。 function Person(name) { this.name = name; }
      • 

    

    4. 

  4. 抽取对象所需的方法

      

    • 就是该对象应该拥有的特性，比如人会学习创造，狗会看门逗你笑 Person.prototype.study = function(){};
      • 

    

    5. 

  5. 根据写好的构造函数创建实例，调用属性方法解决实际需求

      

    • 就是调度实例干事 var p = new Person(); p.study(); 
      • 

    

    6. 



9、 原型其他


    

  • 

    谁有prototype与proto
    

    • 



    

  1. 每个函数都有prototype属性
    2. 

  2. 每个对象都有proto属性
    3. 

  3. 函数比较特殊，即是函数又是对象，所以prototype与proto都有
    4. 



    

  • 

    prototype与proto联系
    

    • 



    

  1. 通过构造函数创建的实例
    2. 

  2. 当前构造函数的prototype属性指向谁，实例的proto属性就指向谁
    3. 



    

  • 

    如何得到一个对象继承的原型
    

    • 



    

  1. 通过proto属性（但是它是非标准属性，不建议开发中使用）
    2. 

  2. 通过constructor属性得到对象的构造函数，再访问其prototype得到原型
    3. 



    

  • 

    创建对象时内在的4个步骤
    

    • 



    

  1. 创建一个新实例(本质上就是开辟了一块内存空间)
    2. 

  2. 设置新对象的原型执行构造函数，执行时设置其this指向新实例

      

    • 给新实例设置proto属性值
      • 

    • 这个值与构造函数的prototype属性有关
      • 

    • 赋值过程相当于这样：新实例.proto = 构造函数.prototype
      • 

    

    3. 

  3. 

  4. 返回新实例的地址
    5. 



    

  • 

    对象的属性访问规则
    

    • 



    

  1. 优先从自身查找
    2. 

  2. 找不到就去原型找
    3. 

  3. 还找不到继续去原型的原型找
    4. 

  4. 直到终点，终点也没有返回undefined
    5. 



    

  • 

     对象的属性赋值
    

    • 



    

  1. 给一个对象的属性赋值
    2. 

  2. 如果之前没有该属性那么就是新增，有就是修改
    3. 

  3. 对象的属性赋值只影响自己，不会对其他对象和原型对象造成影响
    4. 



10、原型常见书写方式


    

  • 

    默认原型
    

    

    function P() {}
P.prototype.fun = function(){};
var p = new P();
    

    

    • 

  • 

    置换原型
    

    

    function P() {}
P.prototype = {
    constructor: P,
    fun: function(){}
};
var p = new P();
    

    

    • 

  • 

    extend复制扩展
    

    

    function P() {}
extend(P.prototype, {}, {
    fun: function(){}
}, {
    fun2: function(){}
});
var p = new P();
    

    

    • 

  • 

    Object.create
    

    

    var proObj = {
    fun: function(){}
};
var p = Object.create(proObj);
    

    

    • 

  • 

    实现属性复制函数封装
    

    

    function extend() {
    var target = arguments[0];
    for(var i = 1, len = arguments.length; i < len; i++) {
        for(var key in arguments[i]) {
            target[key] = arguments[i][key];
        }
    }
    return target;
}
    

    

    • 

  • 

    类成员与实例成员
    

    • 



    

  1. 类成员(静态成员)：添加给类自己的属性与方法
    2. 

  2. 实例成员

      

    • 添加给实例自己的属性与方法
      • 

    • 原型上供实例使用的属性与方法
      • 

    

    3. 



 


11、原型链


 


    

  • 

    概念：一个对象继承的所有由proto属性串联在一起的对象，称为该对象的原型链。
    

    • 

  • 

    对象原型链的研究方案
    

    • 



    

  1. 先通过proto得到对象的原型
    2. 

  2. 然后访问这个原型的constructor属性，确定该原型的身份
    3. 

  3. 然后继续按照上诉两个步骤，往上研究原型，最终就得到了对象的原型链。
    4. 



    

  • 

      规律与常见对象原型链结构
    

    • 



    

  1. 原型链的终点统一是Object.prototype
    2. 

  2. 对象的原型和该对象的类型有关
      

    1. 比如Person的实例，原型是Person.prototype
      2. 

    2. 比如Animal的实例，原型是Animal.prototype
      3. 

    3. []的原型链结构 [] ==> Array.prototype ==> Object.prototype ==> null 
      4. 

    4. {}的原型链结构 {} ==> Object.prototype ==> null 
      5. 

    5. /abc/的原型链结构 /abc/ ==> RegExp.prototype ==> Object.prototype ==> null 
      6. 

    6. Person的原型链结构 Person ==> Function.prototype ==> Object.prototype ==> null 
      7. 

    7. Function的原型链结构 Function ==> Function.prototype ==> Object.prototype ==> null 
      8. 

    8. Object的原型链结构 Object ==> Function.prototype ==> Object.prototype ==> null 
      9. 

    3. 

  3. 构造函数默认的prototype，它统一都继承Object.prototype

      

    • 比如Person.prototype，原型是Object.prototype
      • 

    • 比如Animal.prototype，原型是Object.prototype
      • 

    

    4. 

  4. 通过这个规则，可以自由猜想出任意一个实例所有的原型

      

    • 比如Book的实例，其原型结构为： Book实例 ==> Book.protoype ==> Object.prototype ==> null
      • 

    

    5. 



12、运算符与方法


    

  • 

    in -- 运算符
    

    • 



    

  1. 作用：判断能否使用某个属性（包含继承的属性）
    2. 

  2. 语法：属性名 in 对象
    3. 

  3. 返回值：boolean
    4. 



    

  • 

     hasOwnProperty -- 方法
    

    • 



    

  1. 作用：判断一个属性是不是自己的（不包含继承的属性）
    2. 

  2. 语法：对象.hasOwnProperty(属性名)
    3. 

  3. 返回值：boolean
    4. 



    

  • 

    关于for in遍历的补充：for in可以遍历对象继承的属性，不过一些内置的属性是不可遍历的。
    

    • 

  • 

    delete -- 运算符
    

    • 



    

  1. 作用：删除对象的属性
    2. 

  2. 语法：delete 对象.属性名 || delete 对象[属性名]
    3. 

  3. 返回值：boolean
    4. 



    

  • 

    instanceof -- 运算符
    

    • 



    

  1. 作用：判断一个对象的原型链中是否含有某个构造函数的prototype
    2. 

  2. 语法：对象 instanceof 构造函数
    3. 

  3. 返回值：boolean
    4. 



    

  • 

     Function -- 内置构造函数
    

    • 



    

  1. 作用：创建函数实例
    2. 

  2. 语法：new Function(形参1，形参2，...，代码体)
    3. 

  3. 返回值：新创建的函数实例
    4. 

  4. 特点：能够把字符串当做js脚本执行
    5. 



    

  • 

    eval -- 内置的全局函数
    

    • 



    

  1. 作用：执行字符串代码
    2. 

  2. 语法：eval(字符串代码)
    3. 



13、 函数四种调用模式




谨记：函数调用时，内部的this的值和这个函数定义无关，和运行(调用)有关。




    

  • 

    函数调用模式 ==> 函数名() || 自调
    

    • 



这种方式调用，函数运行时内部的this指向全局对象window。


    

  • 

    方法调用模式 ==> 对象.方法名() || 对象['方法名'] || 祖对象.父对象.子对象.方法名()
    

    • 



这种方式调用，函数运行时内部的this指向宿主对象。 (dom中事件绑定的函数，就是这种调用方式，所以this指向对应的dom对象)


    

  • 

    构造函数调用模式 ==> new 构造函数() || new 对象.构造函数()
    

    • 



这种方式调用，函数运行时内部的this指向新创建的实例对象。


    

  • 

    上下文调用模式(间接调用模式)
    

    • 



    

  1. 函数名.call(this, arg1, arg2);
    2. 

  2. 函数名.apply(this, [arg1, arg2]); 这种方式调用，函数运行时内部的this指向call或apply传入的第一个参数； 如果没有传第一个参数，或者第一个参数为null、undefined，那么this统一指向window。
    3. 



14、 作用域


 概念：变量的有效范围。


    

  • 

    全局变量
    

    • 



    

  1. 在全局都有效的变量。
    2. 

  2. 定义方式：函数外定义。
    3. 

  3. 生命周期：从定义开始，到页面被卸载结束。
    4. 



    

  • 

    局部变量
    

    • 



    

  1. 只在局部有效的变量。
    2. 

  2. 定义方式：函数内定义。
    3. 

  3. 生命周期：一般情况下，是从定义开始，到函数执行完毕结束。
    4. 



    

  • 

    函数作用域
    

    • 



    

  1. 只有函数才可以产生新的作用域
    2. 

  2. 只有函数可以限定变量的有效范围
    3. 



    

  • 

     块级作用域 ==> js没有
    

    • 



    

  1. 凡是代码块就可以产生新的作用域
    2. 

  2. 凡是代码块就可以限定变量的有效范围
    3. 



    

  • 

    词法作用域(静态作用域)
    

    • 



　　说的是变量的查找规则，特点是变量查找与函数定义有关，与调用无关


    

  1. 先在当前作用域查找
    2. 

  2. 找不到就去定义该函数的作用域找
    3. 

  3. 一直找到全局作用域为止，全局也没有则报错
    4. 



    

  • 

    作用域的产生：函数可以被多次重复调用，调用一次就会产生一个新的作用域。
    

    • 

  • 

    作用域链
    

    • 



    

  1. 函数在定义的时候，将来它执行时的上级作用域就被确定好了，上级作用域可能还有上级，函数所有的上级作用域称之为作用域链。
    2. 

  2. 一个函数作用域可以访问的所有上级作用域，称为它的作用域链。
    3. 



    

  • 

     垃圾回收机制原则
    

    • 



    

  1. 一个对象没有被其他变量或者属性引用，那么就会被释放。　同时还要保证该对象能够被使用，对于那些无法使用，又存在循环引用的对象，也会被释放。
    2. 

  2. 一个局部变量没有被其他函数引用，那么就会被释放。
    3. 



    

  • 

    注意：有一个容易搞混，又没有什么联系的知识点，这里强调一下
    

    • 

  • 函数内的this，与函数的定义无关，与调用有关。
    • 





function fn() {
    console.log(a); // 报错，自己找不到，去定义fn的全局找，所以这里和fn的定义有关，与fn的调用无关。
}
(function() {
    var a = 10;
    fn();
})();




 


15、闭包


    

  • 

    概念：在js中访问了自由变量的函数就是闭包
    

    • 

  • 

    自由变量：函数可访问的外部局部变量，称之为该函数的自由变量
    

    • 

  • 

    特点：闭包的自由变量生命周期会被拉长，与闭包的生命周期进行了捆绑
    

    • 

  • 

    计数器案例
    

    

    function getCounter() {
    var total = 0;
    return {
        add: function() {
            total++;
        },
        get: function() {
            return total;
        }
    };
};
var counter = getCounter();
counter.add();
counter.get();
var counter2 = getCounter();
counter2.add();
counter2.get();
    

    

     
    

    • 

  • 

     缓存操作
    

    

    var cache = (function() {
    var cache = {};
    return {
        set: function(key, val) {
            cache[key] = val;
        },
        get: function(key) {
            return cache[key];
        }
    };
}());
cache.set('张锐', '中国人');
cache.get('张锐');
    

    

     
    

    • 

  • 

     for循环练习
    

    

    var arr = ['第一句话', '第二句话', '第三句话'];
for(var i = 0, len = arr.length; i < len; i++) {
    setTimeout(function(i) {
        return function() {
            console.log(arr[i]);
        }
    }(i), 1000 * i + 1000);
}
    

    

     
    

    • 



16、 预解析


    

  1. 可以理解为js解析引擎在逐行执行代码前，对一些特殊代码的预先执行。
    2. 

  2. 预解析过后代码才会从上到下逐行执行，但是预解析时已经定义的变量与函数，是不会重复定义的。
    3. 

  3. 预解析的本质就是变量对象初始化。
    4. 



    

  • 

    预解析做了两件事情
    

    • 



　　1、变量声明提升：检测到变量声明那就率先进行声明


　　2、函数声明提升：检测到函数声明也率先进行声明


    

  • 

    变量声明
    

    • 



    

  1. 使用通过var定义的变量，才属于变量声明

    

    var a; //属于变量声明。
b = 10;// 不属于变量声明。
    

    

    2. 

  2. var关键字可以通过逗号连续声明多个变量

    

    var a, b, c = 20, d = 30;
//a,b,c,d全部属于声明。
    

    

    3. 

  3. var关键字在声明变量的时候，可以给其赋值，如果赋值表达式中含有一些变量，这些变量不属于变量声明。

    

    var a = b = 10;
//其中a属于变量声明，b不属于。
    

    

    4. 



    

  • 

    函数声明
    

    • 
在js中，函数声明式写法比较单一，好区分。
      

    1. 要么定义在全局
      2. 

    2. 要么定义在另一个函数主体内
      3. 

    

  • 

    预解析的特点
    

    • 



    

  1. 在变量声明之前访问它不会报错
    2. 

  2. 在函数声明之前调用它不会报错
    3. 



    

  • 

    预解析相关细节
    

    • 



    

  1. js预解析分全局预解析与局部预解析，区别在于局部预解析在函数调用时发生。
    2. 

  2. 变量声明重名 -- 最终只留一个

    

      console.log(a); // 预解析后值保留一个变量a，值为undefined
  var a = 1;
  var a = 2;
    

    

    3. 

  3. 函数声明重名 -- 保留后面的函数

    

     console.log(test); // 预解析后test为打印2的函数
  function test(){ console.log(1) }
  function test(){ console.log(2) }
    

    

    4. 

  4. 变量与函数重名 -- 保留函数

    

    console.log(test); // 预解析后test值为函数
  var test = 10;
  function test(){}
  var test = 20;
    

    

    5. 



    

  • 

    函数执行时形参会优先执行
    

    • 



　　　　形参定义与赋值优先于变量与函数声明。




(function(a) {
  console.log(a);  // a函数
  var a = 200;
  function a(){}
  console.log(a);  // 200
}(100));




    

  • 

    函数表达式的名称
    

    

    // 函数fnName的名字在外面无法访问，但是可以在函数内访问，
    // 相当于自己的一个局部变量，值为自己的引用。
    var fn = function fnName(){
        console.log(fnName);  // 里面可以访问
    };
    console.log(fnName);   // 外面访问报错
    

    

    • 



17、 函数的四种调用模式


    

  • 

    this的特点
    

    • 



    

  1. 函数中的this，调用方式不同，指向不同
    2. 

  2. this与调用有关，与定义无关
    3. 



    

  • 

    1.17.1.1. 函数调用模式
    

    • 



　　　　函数名() || (function(){}()) ==> window


    

  • 

    方法调用模式
    

    • 



　　　　对象.方法名() || 对象方法名 || 祖对象.父对象.子对象.方法名() ==> 宿主对象


    

  • 

    构造器调用模式
    

    • 



　　　　new 构造函数() || new 对象.构造函数() ==> new出来的新实例


    

  • 

    间接调用模式(上下文调用模式)
    

    • 



    

  1. call

      

    • 函数.call(指定的this，实参1，实参2，...)
      • 

    • 对象.方法.call(指定的this，实参1，实参2，...)
      • 

    

    2. 

  2. apply

      

    • 函数.apply(指定的this，[实参1，实参2，...])
      • 

    • 函数.apply(指定的this，{0: 实参1， 1：实参2， length: 2})
      • 

    • 对象.方法.apply(指定的this，[实参1，实参2，...])
      • 

    

    3. 

  3. 异同

      

    • call与apply都来自Function.prototype，所以所有的函数都可以使用。
      • 

    • 都可以改变函数this的指向
      • 

    • 不同之处在于传参的方式上
      • 

    

    4. 

  4. 补充

      

    • 函数调用call和apply，实际上是间接调用自己
      • 

    • 例如fn.call()，表面上看是调用call方法
      • 

    • 实际上连fn自己也被调用了，和fn()直接调用的区别是，this变了
      • 

    

    5. 



    

  • 

     call和apply方法借用的原理
    

    • 



    

  1. 如果一个方法内部操作的是this，那么我们就可以通过call或apply指定该方法this， this改变成谁，那么该方法最终操作的就是谁。
    2. 

  2. 如果一个方法内部没有操作this，那么是无法借用的。
    3. 



    

  • 

    call和apply常见的使用场景
    

    • 



 1.借用数组方法操作伪数组




// 给伪数组添加数据
var obj = {};
Array.protype.push.call(obj, '要添加的第一个值', '要添加的第二个值')

// 通过伪数组获取对应的真数据（获取后原伪数组不会被改变，只是得到了新数组）
var argArr = [].slice.call(arguments);




2、借用Object.prototype.toString获取对象类型




var arr = [];
Object.prototype.toString.call(new Date).slice(8, -1)




3、借用父类构造函数给子类实例添加属性




function Parent(name, age) {
    this.name = name;
    this.age = age;
}
function Son() {
    Parent.apply(this, arguments);
}
var p = new Son('火星人', 999);
// apply拆分数组或伪数组值依次传递给函数
var arr = [1, 10, 20, 40];
Math.max.apply(null, arr)




18、ES5数组新增的3个方法


    

  • 

    forEach
    

    • 



    

  1. 作用：帮我们遍历数组，每遍历到一个值，就会调用一次回调，把这个值与它的下标传递过去
    2. 

  2. 语法：数组.forEach(function(v, i){ console.log('使用forEach帮我们遍历好的值与下标') })
    3. 

  3. 返回值：undefined
    4. 



    

  • 

    map
    

    • 



    

  1. 作用：可以用来代替forEach，但是map可以接收回调的返回值，最终通过一组数据映射为回调返回的另外一组数据
    2. 

  2. 语法：var mapArr = 数组.map(function(v, i){ return v * v })
    3. 

  3. 返回值：回调所有的返回值组成的新数组
    4. 



    

  • 

     filter
    

    • 



    

  1. 作用：可以用来代替forEach，但是还可以过滤数组中的值
    2. 

  2. 语法：var filterArr = 数组.filter(function(v, i){ if(v % 2 ==0){ return true; } })
    3. 

  3. 返回值：所有返回回调返回true的对应值组成的新数组
    4. 



19、 call&apply的补充


    

  1. 如果不传参 ==> this指向window
    2. 

  2. 传null ==> this指向window
    3. 

  3. 传undefined ==> this指向window
    4. 

  4. 传123 ==> this指向123的包装类型对象(Number对象)
    5. 

  5. 传'abc' ==> this指向'abc'的包装类型对象(String对象)
    6. 

  6. 传true ==> this指向true的包装类型对象(Boolean对象)
    7. 

  7. 传对象 ==> this指向传入的对象
    8. 



20、 严格模式


    

  1. ES5新增的一个特性，使用该特性可以让js以一种新的模式运行js脚本。
    2. 

  2. 该模式下可以强制我们抛弃那些不推荐不友好的写法
    3. 

  3. 该模式下可以让js之前的一些设计不太合理的api表现的合理一些
    4. 

  4. 该模式下可以让js拥有一些新的特性，比如ES6/ES7规范中定义的某些语法，必须在严格模式下才有效
    5. 



    

  • 

     严格模式的分类
    

    • 



　　　　全局模式


    

    1. 

    1. 在全局代码的最上面书写一句话'use strict';
      2. 

    2. 使用该模式，所有的代码都按照严格模式执行
      3. 

    2. 
局部模式
      

    1. 在函数内部的最上面书写一句话'use strict';
      2. 

    2. 使用该模式，只有该函数内的代码才会按照严格模式执行
      3. 



    

  • 

    需要记住的几条严格模式规则
    

    • 



    

  1. 定义变量必须使用var
    2. 

  2. 函数调用模式this为undefined
    3. 

  3. 真正实现了call谁this就为谁
    4. 



 其他


    

  1. 不能使用with语句
    2. 

  2. 废除函数.caller与arguments.callee
    3. 

  3. eval拥有了单独的作用域
    4. 







            

            
posted @ 
2017-06-07 00:22 
陈笑笑 
阅读(346) 
评论(0) 
编辑 
收藏 
举报