JavaScript高级
@ 姜波 | 星期一,八月 12 日,2019 年 | 12 分钟阅读 | 更新于 星期一,八月 12 日,2019 年

JS基本介绍

  • JS的用途:Javascript可以实现浏览器端、服务器端(nodejs)。。。
  • 浏览器端JS由以下三个部分组成:
  • ECMAScript:基础语法(数据类型、运算符、函数。。。)
    • BOM(浏览器对象模型):window、location、history、navigator。。。
    • DOM(文档对象模型):div、p、span。。。
  • ECMAScript又名es,有以下重大版本:
    • 旧时代:
      • es1.0。。。es3.1
    • 新时代:
      • es5
      • es6(es2015)
      • es7(es2016)、es8(es2017)

数据类型

  • 基本数据类型——值类型:(数字、字符串、布尔值、null、undefined)
    • undefined类型?
  • 复杂数据类型——引用类型:(对象)
    • 数组
    • 函数
    • 正则表达式
    • Date

对象的基本使用

创建一个对象

    var student={ 
        name:"李白" , //student有一个name属性,值为"李白"
        grade:"初一" ,
        //a、student有一个say属性,值为一个函数
        //b、student有一个say方法
        say:function(){
            console.log("你好");
        },
        run:function(speed){
            console.log("正在以"+speed+"米/秒的速度奔跑");
        }
    }

对象是键值对的集合:对象是由属性和方法构成的 (ps:也有说法为:对象里面皆属性,认为方法也是一个属性)

  • name是属性 grade是属性
  • say是方法 run是方法

对象属性操作

获取属性:

第一种方式:.语法

  • student.name 获取到name属性的值,为:“李白”
  • student.say 获取到一个函数

第二种方式:[]语法

  • student[“name”] 等价于student.name
  • student[“say”] 等价于student.say

号外:2种方式的差异:

  • .语法更方便,但是坑比较多(有局限性),比如:
    • .后面不能使用js中的关键字、保留字(class、this、function。。。)
    • .后面不能使用数字
    var obj={};
    obj.this=5; //语法错误
    obj.0=10;   //语法错误
  • []使用更广泛
    • o1[变量name]
    • [“class”]、[“this”]都可以随意使用 obj["this"]=10
    • [0]、[1]、[2]也可以使用
      • obj[3]=50 = obj["3"]=50
      • 思考:为什么obj[3]=obj[“3”]
    • 甚至还可以这样用:["[object Array]"]
      • jquery里面就有这样的实现
    • 也可以这样用:["{abc}"]
      • 给对象添加了{abc}属性

设置属性

  • student["gender"]="男" 等价于: student.gender="男"
    • 如果student对象中没有gender属性,就添加一个gender属性,值为"男"
    • 如果student对象中有gender属性,就修改gender属性的值为"男"
  • 案例1:student.isFemale=true
  • 案例2:student["children"]=[1,2,5]
  • 案例3:
    student.toShanghai=function(){   
        console.log("正在去往上海的路上")   
    }

删除属性

  • delete student[“gender”]
  • delete student.gender

通过构造函数创建对象

构造函数创建对象的例子:

  • var xiaoming = new Object() –> var xiaoming = {};

  • var now = new Date()

  • var rooms = new Array(1,3,5) –> var rooms = [1,3,5]

  • var isMale=/123/; ==> var isMale=new RegExp("123")

    • isMale是通过RegExp构造函数创建出来的对象
    • isMale是RegExp构造函数的实例
  • 以上例子中,Object、Date、Array都是内置的构造函数

自定义一个构造函数来创建对象

  • 构造函数
    function Person(name,age){
        this.name=name;
        this.age=age;
    }
    var p1=new Person("赵云",18)
  • 说明:p1就是根据【Person构造函数】创建出来的对象

构造函数的概念

  • 任何函数都可以当成构造函数 function CreateFunc(){ }
  • 只要把一个函数通过new的方式来进行调用,我们就把这一次函数的调用方式称之为:构造函数的调用
    • new CreateFunc(); 此时CreateFunc就是一个构造函数
    • CreateFunc(); 此时的CreateFunc并不是构造函数

关于new Object()

  • new Object()等同于对象字面量{}

构造函数的执行过程

var p1=new Person();

  • 1、创建一个对象 (我们把这个对象称之为Person构造函数的实例)- _p1
  • 2、创建一个内部对象,this,将this指向该实例(_p1)
  • 3、执行函数内部的代码,其中,操作this的部分就是操作了该实例(_p1)
  • 4、返回值:
    • a、如果函数没有返回值(没有return语句),那么就会返回构造函数的实例(p1)
    • b、如果函数返回了一个基本数据类型的值,那么本次构造函数的返回值是该实例(_p1)
        function fn(){
              
        }
        var f1=new fn();    //f1就是fn的实例
    
        function fn2(){
            return "abc";
        }
        var f2=new fn2();   //f2是fn2构造函数的实例
    
    • c、如果函数返回了一个复杂数据类型的值,那么本次函数的返回值就是该值
        function fn3(){
            return [1,3,5]; 
            //数组是一个对象类型的值,
            //所以数组是一个复杂数据类型的值
            //-->本次构造函数的真正返回值就是该数组
            //-->不再是fn3构造函数的实例
        }
        var f3=new fn3();   //f3还是fn3的实例吗?错
        //f3值为[1,3,5]
    

继承

JS中继承的概念:

  • 通过【某种方式】让一个对象可以访问到另一个对象中的属性和方法,我们把这种方式称之为继承 并不是所谓的xxx extends yyy

为什么要使用继承?

  • 有些对象会有方法(动作、行为),而这些方法都是函数,如果把这些方法和函数都放在构造函数中声明就会导致内存的浪费
    function Person(){
        this.say=function(){
            console.log("你好")
        }
    }
    var p1=new Person();
    var p2=new Person();
    console.log(p1.say === p2.say);   //false

继承的第一种方式:原型链继承1

    Person.prototype.say=function(){
        console.log("你好")
    }
  • 缺点:添加1、2个方法无所谓,但是如果方法很多会导致过多的代码冗余

继承的第二种方式:原型链继承2

    Person.prototype = {
        //切记不能忘记
        constructor:Person,
        say:function(){
            console.log("你好");
        },
        run:function(){
            console.log("正在进行百米冲刺");
        }
    }
  • 注意点:
  • a、一般情况下,应该先改变原型对象,再创建对象
  • b、一般情况下,对于新原型,会添加一个constructor属性,从而不破坏原有的原型对象的结构

继承的第三种方式:拷贝继承(混入继承:mixin)

  • 场景:有时候想使用某个对象中的属性,但是又不能直接修改它,于是就可以创建一个该对象的拷贝
  • 实际运用:
    • jquery:$.extend:编写jquery插件的必经之路
      • 基于jquery封装一个表格控件
    var o1={ age:2 };

    var o2 = o1;
    o2.age=18;      
    //1、修改了o2对象的age属性
    //2、由于o2对象跟o1对象是同一个对象
    //3、所以此时o1对象的age属性也被修改了
    var o3={gender:"男",grade:"初三",group:"第五组",name:"张三"};
    var o4={gender:"男",grade:"初三",group:"第五组",name:"李四"};
    //上述代码中,如果使用拷贝继承对代码进行优化会非常和谐

    //实现拷贝继承:
    //1、已经拥有了o3对象
    //2、创建一个o3对象的拷贝(克隆):for...in循环
    

    //3、修改克隆对象,把该对象的name属性改为"李四"
    
  • 实现1:
    var source={name:"李白",age:15}
    var target={};
    target.name=source.name
    target.age=source.age;
  • 浅拷贝和深拷贝

    • 浅拷贝只是拷贝一层属性,没有内部对象
    • 深拷贝其实是利用了递归的原理,将对象的若干层属性拷贝出来
        var students=[
            {name:"",age:""},
            {name:"",age:""}
        ]
    
  • 上面的方式很明显无法重用,实际代码编写过程中,很多时候都会使用拷贝继承的方式,所以为了重用,可以编写一个函数把他们封装起来:

    function extend(target,source){
        for(key in source){
            target[key]=source[key];
        }
        return target;
    }
    extend(target,source)
  • 由于拷贝继承在实际开发中使用场景非常多,所以很多库都对此有了实现

    • jquery:$.extend
  • es6中有了 <对象扩展运算符> 仿佛就是专门为了拷贝继承而生:

    • 优点:简单的令人发指
    var source={name:"李白",age:15}
    //让target是一个新对象,同时拥有了name、age属性
    var target={ ...source }
    
    var target2={ ...source,age:18 }

继承的第四种方式:原型式继承:(道格拉斯在蝴蝶书中提出来的)

  • 场景:
    • a、创建一个纯洁的对象:对象什么属性都没有
    • b、创建一个继承自某个父对象的子对象
          var parent={ age:18,gender:"男"};
          var student=Object.create(parent);
          //student.__proto__===parent
      
  • 使用方式:
    • 空对象:Object.create(null)
    •   var o1={ say:function(){} }
        var o2=Object.create(o1);
      

继承的第五种方式:借用构造函数实现继承

  • 场景:适用于2种构造函数之间逻辑有相似的情况
  • 原理:函数的call、apply调用方式
function Animal(name,age,gender){
    this.name=name;
    this.age=age;
    this.gender=gender;
}
function Person(name,age,gender,say){
    this.name=name;
    this.age=age;
    this.gender=gender;

    this.say=function(){

    }
}
  • 局限性:Animal(父类构造函数)的代码必须完全适用于Person(子类构造函数)

  • 以上代码用借用构造函数实现

function Animal(name,age){
    this.name=name;
    this.age=age;
}
function Person(name,age,address){
    Animal.call(this,name);
    //this.name=name;
    //this.age=age;
    this.address=address;
}
  • 寄生继承、寄生组合继承

原型链(家族族谱)

  • 概念:JS里面的对象可能会有父对象,父对象还会有父对象,。。。。。祖先

  • 根本:继承

    • 属性:对象中几乎都会有一个__proto__属性,指向他的父对象 -意义:可以实现让该对象访问到父对象中相关属性
  • 根对象:Object.prototype

    • var arr=[1,3,5]
    • arr.proto:Array.prototype
    • arr.proto.__proto__找到了根对象
        function Animal(){}
        var cat=new Animal();
        //cat.__proto__:Animal.prototype
        //cat.__proto__.__proto__:根对象
    
  • 错误的理解:万物继承自Object?

闭包

变量作用域

  • 变量作用域的概念:就是一个变量可以使用的范围
  • JS中首先有一个最外层的作用域:称之为全局作用域
  • JS中还可以通过函数创建出一个独立的作用域,其中函数可以嵌套,所以作用域也可以嵌套
var age=18;     //age是在全局作用域中声明的变量:全局变量

function f1(){
    console.log(name);      //可以访问到name变量
    var name="周董" //name是f1函数内部声明的变量,所以name变量的作用域就是在f1函数内部

    console.log(name);      //可以访问到name变量

    console.log(age);       //age是全局作用域中声明的,所以age也可以访问
}

console.log(age);       //也可以访问
    //多级作用域
    //-->1级作用域
    var gender="男";
    function fn(){
        //问题:
        //gender:可以访问
        //age:  可以访问
        //height:不能访问

        //-->2级作用域
        return function(){
            //问题:
            //gender:   通过一级一级作用域的查找,发现gender是全局作用域中声明的变量
            //age:
            //height:
            console.log(gender);

            //-->3级作用域
            var height=180;
        }
        var age=5;
    }

作用域链

  • 由于作用域是相对于变量而言的,而如果存在多级作用域,这个变量又来自于哪里?这个问题就需要好好地探究一下了,我们把这个变量的查找过程称之为变量的作用域链

  • 作用域链的意义:查找变量(确定变量来自于哪里,变量是否可以访问)

  • 简单来说,作用域链可以用以下几句话来概括:(或者说:确定一个变量来自于哪个作用域)

    • 查看当前作用域,如果当前作用域声明了这个变量,就确定结果
    • 查找当前作用域的上级作用域,也就是当前函数的上级函数,看看上级函数中有没有声明
    • 再查找上级函数的上级函数,直到全局作用域为止
    • 如果全局作用域中也没有,我们就认为这个变量未声明(xxx is not defined)
  • 举例1:

    var name="张三";
    function f1(){
        var name="abc";
        console.log(name);
    }
    f1();
  • 举例2:
    var name="张三";
    function f1(){
        console.log(name);
        var name="abc";
    }
    f1();
  • 举例3:
    var name="张三";
    function f1(){
        console.log(name);
        var name="abc";
    }
    f1();
  • 举例4:
    var name="张三";
    function f1(){
        return function(){
            console.log(name);
        }
        var name="abc";
    }
    var fn=f1();
    fn();
  • 举例5:
    var name="张三";
    function f1(){
        return {
            say:function(){
                console.log(name);
                var name="abc";
            }
        }
    }
    var fn=f1();

闭包的问题

    function fn(){
        var a=5;
        return function(){
            a++;
            console.log(a);
        }
    }
    var f1=fn();
    f1();
    f1();
    f1();

闭包问题的产生原因

  • 函数执行完毕后,作用域中保留了最新的a变量的值

闭包的应用场景

  • 模块化
  • 防止变量被破坏

函数的4种调用方式

  • ES6之前,函数内部的this是由该函数的调用方式决定的
    • 函数内部的this跟大小写、书写位置无关
  • 1、函数调用
    var age=18;
    var p={
        age:15
        say:function(){
            console.log(this.age);//window.age:18
        }
    }
    var s1=p.say
    s1();       //函数调用
  • 2、方法调用
    var age=18;
    var p={
        age:15
        say:function(){
            console.log(this.age);//this:p
            //this.age->p.age:15
        }
    }
    p.say()//方法调用
  • 3、new调用(构造函数)
    var age=18;
    var p={
        age:15
        say:function(){
            //this:say构造函数的实例,实例中并没有age属性,值为:undefined
            console.log(this.age);
        }
    }
    new p.say()//构造函数调用
    //相当于:
    var s1=p.say;
    new s1();
  • 4、上下文方式(call、apply、bind)
    var length=21;
    function f1(){
        console.log(this.length);
    }
    f1.call([1,3,5])    //3
    f1.apply(this)      //window.length:21
    f1.call(5)          //undefined
  • 上下文模式应用场景:
    • 一些需要指定this的情况,比如$.each方法回调函数内部的this
    • 判断数据类型:
      • Object.prototype.toString.call(1);
  • 在ES6的箭头函数之前的时代,想要判断一个函数内部的this指向谁,就是根据上面的四种方式来决定的

原型

  • 原型很多人开发用不到?
    • 很多人都用es6/7/8开发,确实用的比较少
    • 如果你用es5之前的版本开发代码(IE8、IE7。。。),可能天天都要写原型
    • 理解了原型,才是理解了JS面向对象的核心
  • 类继承其实本质上还是用原型继承来(包装)的

对象的属性查找规则

  1. 首先查看本身有没有length属性
  2. 如果本身没有该属性,那么去它的原型对象中查找
  3. 如果原型对象中没有,那么就去原型对象的原型对象中查找,最终一直找到根对象(Object.prototype)
  4. 最终都没有找到的话,我们认为该对象并没有该属性,如果获取该属性的值:undefined

补充,判断数据类型

  • typeof
    • typeof只能判断:数字、字符串、布尔值、undefined、函数
  • Object.prototype.toString.call()
    • 5 ‘[object Number]’
    • “abc” ‘[object String]’
    • true ‘[object Boolean]’
    • null ‘[object Null]’
    • undefined ‘[object Undefined]’
    • [1,3,5] ‘[object Array]’
    • function(){} ‘[object Function]’
    • new Date() ‘[object Date]’
    • /abc/ ‘[object RegExp]’
  • Array.isArray() es5中提出来的检测数组
  • isNaN()
  • isInfinity()

指向window

$.ajax({
    success:function(){
        console.log(this);        //window
    }
})
[1,3,5].map(function(){
    console.log(this);      //window
})
    $("div")

    `${$}`
    `${$('div')}`

global和window的区别

  • global是es中全局作用域中的根对象
    • 但是nodejs里面,global全是表示全局变量的载体
    • 浏览器端的js里面,全局变量都放在了window中,浏览器中不存在global对象

冻结对象

const arr1 = Object.freeze([1,2,3]);
console.log(Object.isFrozen(arr1));
js
保存为图片

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接