读javascript语言精髓笔记

对象

默认值填充

对象属性不存在时，使用||运算符填充：obj.name||'lpp'

object属性不确定时避免报错

当检索一个undefined的值时，可以通过 &&运算符来避免错误。
例：

let obj ={};
obj.name //undefined
obj.name.frist //报错
obj.name && obj.name.frist //先检索 obj.name是否为undefined ，false后避免执行后面报错

hasOwnproperty

检测对象中是否存在该属性，不会查找该对象的原型链。

最小化使用全局变量

在全局创建空的对象

var MYAPP = {}; //让该空对象作为唯一的全局对象
MYAPP.WriteCode = {
    //babala
}

最小化使用全局变量可以减少全局污染、降低和其他库框架的重名互相影响

给类型添加方法

Object.prototype可以给所有构造函数对象添加方法

Object.prototype.showA = function () {
    console.log(this.a)
}
let o = {a : 1};
o.showA(); //1
 //届时，想到了jquery里的封装
  $(el).on('click',function(){
    console.log(1)
 }) 

尝试实现：

首先对象是一个dom对象，其次声明了一个on函数，里面两个参数分别是事件和匿名函数;
那么先从dom对象入手，给该函数添加方法必须找到该对象实例的构造函数，在控制台输入 document.__proto__找到 HTMLElement 再比如

'str'.__proto__ ： String //这样就找到该对象实例的构造函数
HTMLElement.prototype.on = function(evt,fun){
   this[evt] = fun;
}
el.on('onclick',function(){
    console.log('balabla');
})

仿jq通用选择器，多dom绑定事件

function $(el){
    return document.querySelectorAll(el);
}
NodeList.prototype.on = function(evt,fun){
  if(this && this.length > 0){
    this.forEach((item)=>{
        item[evt] = fun;
    })
  }  
}

$('div,h2,h1').on("onclick",function(){
    console.log(this)
})

模块

通过函数和闭包来构造模块

模块模式的一般形式是：一个定义了私有变量和函数的函数，利用闭包创建可以访问私有变量和函数的特权函数；最后返回这个特权函数，或者把他们保存到一个可访问的地方。

利：摒弃全局变量减少全局变量污染、安全促使信息隐藏、让思路清晰明了

例():

//做饭  foodMaterial spice为私有属性
let cook = function(){
    let FoodMaterial = 'Tomatoes'; //食材：西红柿
    let Spice = '食用盐'; //作料：食用盐
    return {
        buy:function(){
            console.log('购买' + FoodMaterial + '和' + 'Spice' );
        },
        doFood:function(){
            console.log(`开始做${FoodMaterial}`);
        }
    }
}
let o = cook();
o.buy();//购买Tomatoes和Spice
o.doFood();//开始做Tomatoes                                  

突然想吃肉，不吃西红柿了

//做饭 
let cook = function(){
    let FoodMaterial = 'Tomatoes'; //食材：西红柿
    let Spice = '食用盐'; //作料：食用盐
    return {
        buy:function(){
            console.log('购买' + FoodMaterial + '和' + 'Spice' );
        },
        doFood:function(){
            console.log(`开始做${FoodMaterial}`);
        },
        setFood:function(food){
            //未传参则不执行赋值
            food && (FoodMaterial = food);
        }
    }
}
let o = cook();
o.setFood('肉');
o.buy();    //购买肉和Spice
o.doFood();//开始做肉     

可以使用传参的形式改变函数内的变量