读javascript语言精髓笔记

小灰灰 2021-03-23 14:24 528阅读 0赞

## 对象 ##

### 默认值填充 ###

对象属性不存在时，使用`||`运算符填充：`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');
    })

# 模块 #

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

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

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

例():

//做饭  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();//开始做肉

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