美文网首页
javascript标准参考教程读后感(上)

javascript标准参考教程读后感(上)

作者: f4c03c046d4b | 来源:发表于2017-11-03 08:58 被阅读0次

    变量提升

    javaScript引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行的运行。这曹成的结果就是所有的变量声明语句都会被提升到代码的头部,这就是变量提升(hoisting)

    变量提升只对有VAR 定义的声明有效

    数据类型

    数值(number),字符串(string),布尔值(boolean),undefined,null,对象(object)

    对象有三个子类型:狭义的对象(object),数组(array),函数(function)

    typeof运算符

    返回一个值的数据类型,可能的结果是(1)原始类型【数值,字符串,布尔值】(2)函数(3)undefined(4)对象【对象,数组,null】

    ···
    if(typeof v==="undefined") alert("undefined");
    ···

    NaN

    NaN表示非数字,主要出现在将字符串解析成数字出错的场合。数据类型依旧属于Number,typeof 结果为number,不等于任何值包含它本身。与任何数运算得到的都是NaN。判断方法 isNaN(NaN)。空数组和只有一个数值成员的数组返回false。

    Infinity

    表示无穷,无穷大或者无穷小。isFinite(Infinity)返回false,检查是否是一个正常数值。

    数值的全局方法

    • parseInt():如果字符串头部有空格会被自动去除,如果参数不是字符串会先转换为字符串。转换为整数的时候,一次转换,遇到不能转化为数字的字符停止,返回转好的部分。
    • parseFloat():转化为浮点数,如果符合科学计数法会进行转换。如果字符串头部有空格会被自动去除。如果字符串包含不能转为浮点数的字符,则不再进行往后转换,返回已经转好的部分。

    字符串

    • 长字符串分为多行
    var str = "long \
    long\
    string";
    var str = "long"
    +"long";
    
    • 字符串与数组
      字符串可以被视为字符数组,因此可以使用数组的方括号运算符。只限读取。

    对象

    • 查看所有属性 Object.keys(o)
    • 删除对象的属性(只能是本身属性不包含集成属性),成功返回true。delete o.p。不能删除var声明的变量
    • 检查对象是否包含某个属性(键名),如果包含就返回TRUE。 ‘p’ in o。
    • for...in for(var i in o)。它遍历的是对象所有可遍历(enumerable)的属性,会跳过不可遍历的属性。它不仅遍历对象自身的属性,还遍历继承的属性。
    • with语句
    // 例一
    with (o) {
      p1 = 1;
      p2 = 2;
    }
    // 等同于
    o.p1 = 1;
    o.p2 = 2;
    
    // 例二
    with (document.links[0]){
      console.log(href);
      console.log(title);
      console.log(style);
    }
    // 等同于
    console.log(document.links[0].href);
    console.log(document.links[0].title);
    console.log(document.links[0].style);
    var o = {};
    
    with (o) {
      x = "abc";
    }
    
    o.x // undefined
    x // "abc"
    
    

    函数

    函数名提升时引擎将函数名视同为变量名。但是var定义的函数不会提升。

    name属性返回紧跟在function关键字后的函数名
    length属性返回函数逾期传入的参数个数,即定义中参数的个数。
    toString()返回函数的源码,包含注释。

    参数

    函数的参数不是必须的,可以省略参数,被省略的参数值为undefined,省略靠前的参数只能显式传入undefined

    arguments对象

    在函数体内读取所有参数。arguments[0]表示第一个参数。这个对象只有在函数体内部才可以使用。严格模式下是只读的。可以通多arguments对象的length属性判断长度。转数组方法Array.prototype.slice.call(arguments);

    callee属性

    返回它对应的原函数。

    Math对象

    • Math.abs() 绝对值
    • Math.ceil()向上取整
    • Math.floor()向下取整
    • Math.max()最大值
    • Math.min()最小值
    • Math.pow()指数运算
    • Math.sqrt()平方根
    • Math.log()自然对数
    • Math.exp() e的指数
    • Math.round()四舍五入
    • Math.random()随机数

    Date对象

    • Date.now()
    • Date.parse()

    JSON

    • JSON.stringify(a,select,split) json to string 可以转换选中部分 split为数字时表示每个属性前添加的空格(不能大于10)split为字符串时会添加在每行前面
    • JSON.parse(s) string to json
      如果对象有自定义的toJSON方法stringify会调用这个方法的返回值作为参数

    console对象

    • console.log()可以接受多个参数连接起来输出可用占位符。
    符号 解释
    %s 字符串
    %d 整数
    %i 整数
    %f 浮点数
    %o 对象链接
    %c CSS格式字符串
    • console.info()和console.debug()都是console.log方法的别名,用法完全一样。
    • console.warn()警告
    • console.error()错误
    • console.table()展示表格
    • console.count();用于计数输出被调用次数。
    • console.dir() 对一个对象进行检查,并已易于阅读的格式显示。
    • console.dirxml()用户已目录树的形式展示DOM节点
    • console.assert(boolean,'error')进行条件判断,false时显示一个错误但不会中断程序执行。
    • console.time(str)和console.timeEnd(str)用于计时
    • console.profile(str)和console.profileEnd(str)新建一个性能测试器(profile)参数是测试器的名称。
    • console.trace()显示当前代码在堆栈中调用路径
    • console.clear()清空控制台
    • $_ 返回上一个表达式的值。
    • $0-$4 最近5个在Elements面板选中的DOM元素$0表示倒数第一个
    • $(selector) 返回第一个匹配的元素等同于document.querySelector()。如果页面有$的定义会覆盖原始定义。
    • $$(selector)返回一个选中的DOM对象,等同于document.querySelectorAll。
    • $x(path)返回一个数组,包含匹配特定XPath表达式的多有DOM元素。
    • inspect(object)方法打开相关面板,并选中对应的元素。
    • getEventListeners(object) 返回一个对象,对象的成员为登记了回调函数的各种事件。
    • keys(object)返回一个数组,包含对象的所有键名。
    • values(object)返回一个数组包含对象的所有键值。
    • monitorEvents(object[,events]),unmonitorEvents(object[, events])监听特定对象上发生的特定事件。
    • debugger Chrome中会自动打开控制台。

    属性描述对象

    原属性 解释
    value 存放该属性的属性值,默认为undefined。只要writable configurable有一个为true就允许改动。
    writable 存放一个布尔值,表示属性值是否可以改变。默认为true
    enumerable 存放一个布尔值,表示该属性是否可枚举。默认为true。设为false,for..in循环和Object.keys()还有JSON.stringify()跳过该属性。
    configurable 存放一个布尔值,表示可配置性。默认为true。设为false,将阻止操作改写value enumerable configurable属性。writable从false改为true对报错。
    get 存放一个函数,默认为undefined。不可与value同时赋值,不能将writable设为true。
    set 存放一个函数,默认为undefined。不可与value同时赋值,不能将writable设为true。

    JavaScript提供了一个内部数据结构,用来描述一个对象的属性的行为,控制它的行为。这被称为“属性描述对象”(attributes object)。每个属性都有自己对应的属性描述对象,保存该属性的一些元信息。有性能损耗。

    原属性 解释
    value 存放该属性的属性值,默认为undefined。只要writable configurable有一个为true就允许改动。
    writable 存放一个布尔值,表示属性值是否可以改变。默认为true
    enumerable 存放一个布尔值,表示该属性是否可枚举。默认为true。设为false,for..in循环和Object.keys()还有JSON.stringify()跳过该属性。
    configurable 存放一个布尔值,表示可配置性。默认为true。设为false,将阻止操作改写value enumerable configurable属性。writable从false改为true对报错。
    get 存放一个函数,默认为undefined。不可与value同时赋值,不能将writable设为true。
    set 存放一个函数,默认为undefined。不可与value同时赋值,不能将writable设为true。
    • Object.getOwnPropertyDescriptor(object,'attrName')方法可以读出对象自身属性的属性描述对象。
    • Object.defineProperty(object,propertyName,attributesObject) 允许通过定义属性描述对象,来定义或修改一个属性,然后返回修改后的对象。
    • object.prototype.propertyIsEnumerbale('attributeName')判断一个属性是否可枚举。
    • Object.defineProperty(object,'attributeName',{get:function(){},set:function(v){}})定义一个可读写的month属性。
    • Object.create(object,prototype,{attributeName:{get:function(){},set:function(v){}}})定义一个可读写的month属性。
    • Object.preventExtensions(object)使得一个对象无法再添加新的属性。可以删除原属性。
    • Object.isExtensible(object)检查一个对象是否可以添加属性。
    • Object.seal(object)无法添加新的属性,无法删除旧属性。
    • Object.isSealed(o)检查一个对象是否使用了seal方法。
    • Object.freeze(o)使得一个对象无法添加新属性、无法删除旧属性、无法改变属性的值。
    • Object.isFrozen(o)判断一个对象是否执行了freeze方法。

    构造函数

    var vehicle = function(){
      this.price = 1000;
    }
    

    函数体内部使用了this关键字,代表了所要生成的对象实例。
    生成对象的时候必须使用new命令,调用函数。

    new命令的原理

    1.创建一个空对象,作为将要返回的对象实例。
    2.将这个空对象的原型指向构造函数的prototype属性。
    3.将这个空对象赋值给这个函数内部的this关键字。
    4.开始执行构造函数内部的代码。
    5.如果函数内部有return语句且后跟一个对象,返回后跟对象。否则返回this.

    • new.target 函数内部使用该属性,如果当前函数时new命令调用指向当前函数,否则为undefined。

    this关键字

    返回属性或方法当前所在的对象。

    绑定this的方法

    function.prototype.call(object,arg,arg1...]),参数为空 null和undefined默认传入全局对象。
    function.prototype.apply(object,[arg,arg1])同
    function.prototype.bind(object)返回一个新函数。

    prototype属性

    JavaScript的每个对象都继承另一个对象,后者称为“原型”(prototype)对象。只有null除外。

    constructor属性

    prototype对象有一个constructor属性默认指向prototype对象所在的构造函数

    instanceof运算符

    返回一个布尔值,表示指定对象是否是某个构造函数的实例。

    Object.getPrototypeOf(object)

    返回一个对象的原型。

    Object.setPrototypeOf(children,parent)

    设置原型返回新对象

    Object.create(object)

    根据一个对象生成对象返回。

    Object.prototype.isPrototypeOf(children)

    判断一个对象是否是另一个对象的原型。

    Object.prototype.proto

    该属性可以改写某个对象的原型对象。指向当前对象的原型对象。

    Object.getOwnPropertyNames(object)

    返回一个数组,成员是对象本身的所有属性的键名,不包含集成的属性。

    Object.prototype.hasOwnProperty('attrName')

    返回一个布尔值,判断某个属性是否定义在自身。

    构造函数的集成

    //在子类的构造函数中调用父类的构造函数
    function Sub(value){
      Super.call(this);
      this.prop = value;
    }
    //让子类的原型指向父类的原型
    Sub.prototype = Object.create(Super.prototype);
    //构造方法指向本身构造方法
    Sub.prototype.constructor = Sub;
    

    单方法继承

    ClassA.prototype.print = function(){
      ClassB.prototype.print.call(this);
    }
    

    多继承

    Object.assign(objcet.prototype,parent.prototype);

    封装私有变量

    //构造函数写法
    function StringBuilder(){
      var buffer = [];
      this.add = function(str){
        buffer.push(str);
      }
    }
    function StringBuilder(){
      this._buffer = [];
    }
    StringBuilder.prototype = {
      constructor : StringBuilder,
      add:function(str){
        this._buffer.push(str);
      }
    }
    //封装私有变量:立即执行函数
    var StringBuilder = (function(){
      var _count = 0;
      var m1 = function(){
        //code;
      }
    return {m1:m1};
    })();
    
    

    相关文章

      网友评论

          本文标题:javascript标准参考教程读后感(上)

          本文链接:https://www.haomeiwen.com/subject/hdcgpxtx.html