JavaScript_援用范例

数组

在ECMAScript中数组黑白常经常运用的援用范例
ECMAScript所定义的数组和其他语言中的数组有着很大的辨别
数组也是一种对象

建立数组


//要领一
var arr = new Array();

//要领二
var arr1 = [];

特征

  • 数组即一组数据的鸠合

  • js数组越发相似java的map容器。长度可变,元素范例恣意

  • 数组长度随时可变!随时可以修正!(length属性)

    var arr1 = [123,324,true,’abc’,1,4,5,new Date()];

    arr1.length = 5;

    console.log( arr1 );
    //log 内里是通报的字符串 , JS引擎默许会挪用.toString(); 隐式的挪用.

经常运用要领

push、pop
shift、unshift
splice、slice
concat、join、sort、reverse(逆序)

影响原数组
splice()
arr.splice(最先项,[掌握几位数,值]);  //statr ,count ,
var arr = [1,2,3,4,5,6,7];
var zf = arr.splice(3); //掌握几位数, 默许值 :arr.length-1 //包括3 本来项数
console.log( arr ); //[1,2,3]
console.log( zf ); //[4,5,6,7]  //返回值 -- 掏出的内容
 

var arr = [1,2,3,4,5,6,7]; 
var zf = arr.splice(3,2);  //截取
console.log( arr ); //[1, 2, 3, 6, 7]
console.log( zf ); //[4,5] 
 

var arr = [1,2,3,4,5,6,7]; 
var t = arr.splice(3,2,'zf','dd'); //替代
console.log( arr ); //[1,2,'zf','dd',6,7]
console.log( t );  //[4,5]
 

var arr = [1,2,3,4,5,6,7]; 
var t = arr.splice(3,0,'zf','dd');  //插进去
console.log(arr); //[1,2,3,'zf','dd',4,5,6,7]
console.log( t );  //[]  //假如为0 ,去除空数组
 

var arr = [1,2,3,4,5,6,7]; 
var 12 = arr.splice(-4); //截取
console.log( arr ); //[1,2,3]
console.log( zf ); //[4,5,6,7]
//
slice(stat,end)  //去出了end-stat 项。 不包括end项。
var zf = arr.sort(function ( a,b ) {  //通报匿名函数,经由历程匿名函数参数推断大小。
    if( a>b ){
        return 1;
    } else if( a<b ){
        return -1;
    } else {
        return 0;
    }
});
console.log( arr ); //["a", "b", "e", "z"]
console.log( zf );  //["a", "b", "e", "z"]

// 影响原数组
push , pop ,unshift ,shift  ,splice  ,reverse  ,sort
// 未影响 原数组
concat ,slice ,join

ES5数组新特征

位置要领:indexOf lastIndexOf
迭代要领:every filter forEach some map
减少要领:reduce reduceRight

// indexOf();  //查找位置 

var arr = [234,23,45,46,45,645,56];

//1个参数的时刻,示意传值  返回索引位置
var idxVal = arr.indexOf(45);

//2个参数的时刻, 第一个示意查询的值,第二个参数是 传值,示意肇端最先查询的肇端位置
var idxVal = arr.indexOf(2,3);

//查找数组比较的时刻 是 "===" 

//找不到返回 -1
//迭代要领

//every : 关于数组每一个元素举行一个函数的运转  假如函数都返回true, 末了则返回true。  假如有一个返回false 末了效果则返回false。
// 测试数组的一切元素是不是都经由历程了指定函数的测试 

var arr =  [1,2,3,4,3,2,4,6];

var reslut = arr.every(function ( item,index,array ) {
    
    return item > 0;
    
});

console.log( reslut );  //true



//filter : 关于数组的每一个元素举行一个函数的运转  给定的函数实行, 把过滤后的效果返回。

var arr =  [1,2,3,4,3,2,4,6];

var reslut = arr.filter(function ( item,index,array ) {
    
    return item > 2;  //一切大于2 的过滤出来
    
})

console.log( reslut );  //[3, 4, 3, 4, 6]


//forEach : 轮回数组每一项,  并实行一个要领
// 要领中的参数:数构成员的值,数构成员的索引,原数组(修正原数组会影响本来遍历的数组)

var arr =  [1,2,3,4,3,2,4,6];

arr.forEach(function ( item,index,array ) {
    
    console.log( item );
    
});

var arr1 = ['tan', 'cyan', 'pink', 'red'];
arr1.forEach(function ( val, idx, arrs ) {
    
    return 1; // 返回返回并不会影响原数组
    
});
console.log(arr);


//map  : 关于数组的每一个元素举行一个函数的运转  可以经由函数实行终了   把新的效果返回, 原数组稳定。

var arr =  [1,2,3,4,3,2,4,6];

var reslut = arr.map(function ( item,index,array ) {
    
    return item * 3;
    
}); 

console.log( reslut );  //[3, 6, 9, 12, 9, 6, 12, 18]


//some : 关于数组每一个元素举行一个函数的运转  假如有一项返回true  末了则返回true  假如每一项都返回false, 末了才返回false。 

var arr =  [1,2,3,4,3,2,4,6];

var reslut = arr.some(function ( item,index,array ) {
    
    return item > 5;  //有一个返回true, 就返回true
    
});

console.log( reslut );  //true

//模仿filter要领
Array.prototype.filter = function ( cb ) {
    
    var reslut = [];
    
    try{
        
        if ( cb && cb.constructor === Function ) {
                
            for ( var i=0; i<this.length; i++ ) {
                
                if ( cb.call(this[i],this[i],i,this) ) {
                    
                    reslut.push(this[i]);
                    
                }
        
            }
            
        }
        
    }catch(e){
        //TODO handle the exception
    }
    
    return reslut ? reslut : '';
    
}

var a = arr.filter(function ( item,index,arr ) {
    
    return item > 2;
    
});
console.log( a );



// 模仿some
Array.prototype.some = function ( fn ) {
    
    try{
        
        if ( fn && fn.constructor === Function ) {
            
            
            for ( var i=0; i<this.length; i++ ) {
                
                // 存在一个函数实行效果 为true , 返回true
                if ( fn.call(this[i], this[i], i, this) ) {
                    
                    return true;
                    
                }
                
            }
            return false;
        }
        
    }catch(e){
        //TODO handle the exception
    }
    
}
var arr =  [1,2,3,4,3,2,4,6];

// reduce  reduceRight

// 前一个值, 当前值, 索引位置, array 
// 数组中的每一个值(从左到右)最先兼并,终究为一个值。
// 吸收一个函数作为累加器,数组中的每一个值(从左到右)最先兼并,终究为一个值。
var reslut = arr.reduce(function ( prev,cur,index,array ) {
    
    return prev + cur;
    
});

console.log( reslut ); //25

// reduceRight 从右最先遍历
var reslut1 = arr.reduceRight(function ( prev,cur,index,array ) {
    
    return prev + cur;
    
});

console.log(  reslut ); //25

// 取得接口的对象

var o = (function() {
    var person = {
        name: 'xixi',
        age: 22,
    }
    return {
        sayName: function(k) {
            return person[k];
        },
    }
}());

var person = ['name', 'age'].reduce(function (obj, k) {
//     console.log(obj, k,'--');
    obj[k] = o.sayName(k);
    return obj;
},{});

console.log(person);

数组推断要领:
Array.isArray();
推断是不是为数组,假如是,则返回true,不然返回false。

var arr = [];
console.log( Array.isArray(arr) );

添补要领:
fill();
完成对数组的添补
参数:接收值,直接添补,假如是函数,也是直接添补

// arr.fill(1);
// arr.fill(function () {
//     return 2;
// });
// arr.fill([1,2,3]);
arr.fill({x: 1});

console.log(arr);

Object

援用范例都是Object范例的实例,Object也是ECMAScript中运用最多的一种范例(就像java.lang.Object一样,Object范例是一切它的实例的基础) //一切类的 基础类。

Object范例的建立体式格局、运用

关于Object范例运用for in 罗列轮回

Obj每一个实例都具有属性和要领

Constructor: 保留着用于建立当前对象的函数。(构造函数)

hasOwnProperty(propertyName):用于检测给定的属性在当前对象实例中(而不是原型中)是不是存在。

isPrototypeOf(Object): 用于搜检传入的对象是不是是别的一个对象的原型。

propertyIsEnumerable(propertyName):用于搜检给定的属性是不是可以运用for-in语句来罗列。

toLocaleString():返回对象的字符串示意。该字符串与实行环境的区域对应.

toString():返回对象的字符串示意。

valueOf():返回对象的字符串、数值或布尔示意。

OBject.prototype.toString()

Object.prototype.toString
作用:依据内部的this返回一个相似于如许的字符串 [object constructorName]
这个要领有个瑕玷,不能猎取用户自定义对象的细致范例.
只能猎取内置对象的范例.
自定义对象范例都返回:[object Object]

console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call(Array)); // [object Fcuntion]
console.log(Object.prototype.toString.call(new Date())); // [object Date]

// 简写体式格局
console.log(({}).toString.call([])); // [object Array]

toString();

// 字符串  ==> String.prototype.toString();
var a = 't';
console.log(a.toString()); // t
var a = new String(); 
console.log(a.toString()); // 空字符串
var a = new String('string');
console.log(a.toString());   // string

// 数组 ==> Array.prototype.toString();
var b = [1, 2, 3, 4];
console.log(b.toString()); // 1,2,3,4
var b = [];
console.log(b.toString()); // 空字符串
var b = new Array();
console.log(b.toString()); // 空字符串
var b = new Array(3, 5);
console.log(b.toString()); // 3,5


// 对象 ==> Object.prototype.toString();
var c = {};
console.log(c.toString()); // [object Object]

// 函数
console.log(Function.toString()); // function Function() { [native code] }
console.log(Array.toString()); // function Array() { [native code] }
console.log(RegExp.toString()); // function RegExp() { [navtive code] }

关于JSON函数

JSON.parse()

作用:将JSON字符串剖析成JavaScirpt值。在剖析历程当中,可以选择性的修正某些属性的原始剖析值。
参数1:JSON字符串
参数2: reviver 函数,用来转换剖析出的属性值。(可选参数)
返回值:剖析出的一个 Object


console.log(JSON.parse(10));  // 10
console.log(JSON.parse(true)); // true
console.log(JSON.parse('"xixi"')); // xixi
console.log(JSON.parse(null));  // null
console.log(JSON.parse('"undefined"')); // undefined
console.log(JSON.parse("[]")); // []

假如指定了 reviver 函数,剖析的出的Object, 剖析值本身以及它所包括的一切属性,会根据肯定的递次(从最最里层的属性最先,一级级往外,终究抵达顶层)离别去挪用 指定的reviver 函数。

在挪用历程当中,当前属性所属的对象会作为this值,当前属性名和属性值会离别作为第一个参数和第二个参数传入 reviver 函数中,假如 reviver 函数返回undefeind,则当前属性会从属性对象中删除,假如返回了别的值,则返回的值会成为当前属性新的属性值。
当遍历到最顶层的值(剖析值)时,传入reviver函数的参数会是空字符串”(由于此时已没有真正的属性)和当前的剖析值(有能够已被修正过),当前的this值会是{"":修正过的剖析值},

JSON.parse('{"p": 5}', function (key, val) {

  if(key === '') return val;     // 假如到了最顶层,则直接返回属性值
    
  return val * 2;
    
}); 

JSON.stringify();

stringify(value [,replacer, [space]]);
将恣意的JavaScript值序列化成JSON字符
参数1:value: 将序列化成JSON字符串的值
参数2:replacer: 可选,假如是一个函数,则在序列化历程当中,被序列化的值的每一个属性都邑经由该函数的转换和处置惩罚。 假如是一个数组,则暴行在这数组中的属性名才会被序列化到终究的JSON字符串中。
参数3:space, 指定缩进可通的空缺字符串,用于美化输出。 掌握效果字符串里的间距。

注重:

  • 不可罗列的属性会被疏忽

  • 非数组对象的属性不能保证以特定的递次涌现的序列化后的字符串中。

  • 布尔值,数字,字符串的包装对象在序列化历程当中会自动装换成对应的原始值。

  • undefeind,恣意的函数,以及symbol值,在徐泪花历程横纵挥别疏忽(涌现在非数组对象的属性值中时)或许被转换成null(涌现在数组中时)

  • 一切以symbol为属性键的属性值都邑被完整疏忽掉,即使 replacer参数中强迫指定包括了它们

    console.log(JSON.stringify([undefined, Object, Symbol()])); // null, null, null
    console.log(JSON.stringify({x: undefined, y: Object, z: Symbol()})); // {}
    

Object.create

ES5为对象供应了一个Object.create();
作用:建立一个类,是一种寄生式继续。
返回一个类,这个类的原型指向通报进来的对象。

建立的实例化对象,构造函数指向的是继续的对象的类的构造函数。本身没有原型,可以经由历程原型链找到继续的对象类中的原型。具有继续对象上的属性以及要领。
因而,建立的实例化对象可以运用继续对象上的属性和要领。


var Book = function (title, price) {
    
    this.title = title;
    
    this.price = price;
    
}

Book.prototype.sayTitle = function () {
    
    return this.price;
    
}

var book = new Book('one', 10);

// 建立一个继续类
var NewBook = Object.create(book);

console.log(NewBook.constructor);

var price = NewBook.sayTitle();

console.log(price);
// 模仿 Object.create();
// 寄生式继续
Object.prototype.create = function ( obj ) {
    
    try{
        
        if ( obj && obj.constructor === Object ) {
            
            function F () {}
            
            F.prototype = obj;
            
            return F;
            
        }
            
        
    }catch(e){
        //TODO handle the exception
    }
    
}

// 建立一个继续类
var NewBook = Object.create(book);

console.log(NewBook.constructor);

var price = NewBook.sayTitle();

console.log(price);

Object.defineProperty

Object.defineProperty();
直接在一个对象上定义一个新属性,或许修正一个已存在的属性,并返回这个对象。
参数1:须要被设置的对象
参数2:设置的属性名
参数3:设置项,增加属性的特征属性

特征属性:
value:该属性值,默许值:undefeind
writable: 可否被修正,默许值:false (不能被修正)
configuarable: 可否经由历程delete删除属性从而从新定义属性,可以修正属性的特征,或许可否把属性修正为接见属性。 默许值:false;(不可以从新定义或删除)
enumerable: 是不是可以被for-in罗列。默许值:false

var obj = {};

Object.defineProperty(obj, 'title', {
    
    value: 'tan',
//                writable: true,
    configurable: false,
//                enumerable: true
    
});

delete obj.title;

//            obj.title = 'pink';

//            for ( var i in obj ) {
//                
//                console.log(obj[i]);
//                
//            }

console.log(obj);

特征要领:
set:给属性供应setter的要领,假如没有setter则为undefined。默许值undefiend。
参数:该参数的新值分配给该属性。默许:undefined

Object.defineProperty(obj, 'title', {
    
    get: function () {
        console.log('get');
        return this._title;
    },
    set: function ( val ) {
        this._title = val;
    }
    
});


obj.title = 'pink';

var t = obj.title;

defineProperties

在一个对象上增加或修正一个或多个自有属性,并返回该对象。
参数1:示意要被处置惩罚的对象
参数2:定义多个属性特征对象

var obj = {}

Object.defineProperties(obj, {
    
    color: {
        value: 'tan'
    },
    
    names: {
        value: 'zf'
    }
    
});

console.log( obj );

getOwnPropertyNames

Object.getOwnPropertyNames();
返回一个由指定对象的一切本身属性的属性名(包括不可罗列属性)构成的数组。
参数:须要猎取的对象。

getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor();
指定对象上一个自在属性对应的属性描述符。(自在属性指的直接给予该对象的属性,不须要从原型链上举行查找的属性)
参数1: 猎取的对象。
参数2:猎取的属性值

模仿map

模仿java中的Map

        
//简朴完成 map

function Map () {
    
    //priveate 的对象来保留  key 和 val
    var obj = {};
    
    // put 要领
    this.put = function ( key,val ) {
        
        
        obj[key] = val;   //把键值对 绑定到object上.
        
    }
    
    //取得map 容器的个数
    this.size = function () {
        
        var count = 0;
        
        for ( var i in obj ) {
            
            count++;
            
        }
        
        return count;
        
    }
    
    //依据key  取得  val
    this.get = function ( key ) {
        
        return obj[key] || (obj[key] === 0) || (obj[key] === false) ? obj[key] : null;
        
    }
    
    // remove 删除要领
    this.remove = function ( key ) {
        
        if ( obj[key] || obj[key] === 0 || obj[key] === false ) delete obj[key];  
        
    }
    
    //eachMap 遍历 map 容器的要领
    this.eachMap = function ( cb ) {
        
        if ( cb && cb.constructor === Function ) {
            
            for ( var i in obj ) {
                
                cb.call(this,i,obj[i]);
                
            }
            
        }
        
    }
    
}

var m = new Map();

m.put('01',120);
m.put('02','tan');

//            console.log( m.size() );
//            
//            console.log( m.get('0') );

//            m.remove('01');
//            console.log( m.get('01'),'--' );

m.eachMap(function ( key,val ) {
    
    console.log( key,val,'---' );
    
});        

去掉数组的反复项

var arr = [1,2,4,2,3,4,5,546,57,6,5,4,31,57];

//js 对象特征, 数组去重 
// 在 js 对象 中 key 是永久 不会反复的.


// 1, 把数组转成一个js的对象
// 2,把数组中的值,变成js 对象当中的key
// 3,把对象再还原成数组

//数组转对象
var toObject = function ( arr ) {
    
    var reslutObj = {};
    
    for ( var i=0; i<arr.length; i++ ) {
        
        if ( arr ) {
        
            reslutObj[arr[i]] = null; //赋值为恣意值
            
        }
        
    }
    
    return reslutObj;
    
}

//对象转成数组
var toArray = function ( obj ) {
    
    var reslutArr = [];
    
    for ( var attr in obj ) {
        
        if ( obj.hasOwnProperty(attr) ) {  //推断是不是是本身上面的属性
            
            reslutArr.push(attr);
            
        }
        
    }
    
    return reslutArr;
    
}

//去掉数组中的反复项
function uniq ( arr ) {
                
    return toArray(toObject(arr));
                
}
    
console.log( uniq(arr) );    

其他援用范例

单体对象(不须要实例化对象,就可以运用的要领):

Global对象(全局)这个对象不存在,无形的对象(迥殊的,特别的存在)
其内部定义了一些要领和属性:encodeURI 、encodeURIComponent、decodeURI、decodeURIComponent、eval、parseInt、parseFloat、isNaN(在js 内里 只要NaN 本身不等于本身本身的)、Escape、 unescape

// encodeURI 、encodeURIComponent、

var uri = 'http://www.baidu.com cn';
var str1 = encodeURI(uri);  //http://www.baidu.com%20cn                  //(url: //不会举行编码)
var str2 = encodeURIComponent(uri);  //http%3A%2F%2Fwww.baidu.com%20cn  //任何不规范的笔墨都邑举行编码

console.log( str1 );
console.log( str2 );

// decodeURI、decodeURIComponent、
console.log( decodeURI(str1) );  //  http://www.baidu.com cn
console.log( decodeURIComponent(str2) );  // http://www.baidu.com cn
//eval(string) 要领  无形的javascript 剖析器

var str1 = 'var a = 10; var b = 20;';
eval(str1);

console.log( a+b );

//数组字符串  直接运用: eval(strArr);

var arr = '[10,203,345,45,6]';

var evalArr = eval(arr);

console.log( evalArr );

//对象字符串  
var obj = '{name: "123", age: 20}';

var evalObj = eval('(' + obj + ')' );

console.log( evalObj );//Object {name: "123", age: 20}
//escape  unescape  URI 转码
var str = '八百米';
var str2 = escape(str); //%u516B%u767E%u7C73

console.log( str2 );

Math对象
内置的Math对象可以用来处置惩罚种种数学运算
可以直接挪用的要领:Math.数学函数(参数)
求随机数要领:Math.random(),发生 [0,1) 局限一个恣意数

Date对象
猎取当前时候的一系列细致要领

var date = new Date();

console.log( date.getTime() );     //当前时候的毫秒数

基础包装范例:Boolean、String、Number

Function范例、RegExp范例

简朴单体和闭包单体

单体(singleton)情势是js中最基础但又最有效的情势之一,它能够比其他任何情势都经常运用。
这类情势供应了一种将代码构造为一个逻辑单位的手腕,这个逻辑单位中的代码可以经由历程单一的变量举行接见。经由历程确保单体对象只存在一份实例,就可以确信本身的一切代码运用的都是一样的全局资本。

简朴单体

// 简朴单体情势   (只能建立一个实例)//没法经由历程new 关键字来实例化.
var Singleton = {  //当做模板类 
    attr1: true,
    attr2: 10,
    
    method1: function () {
        
        console.log( this.attr1 );
        
    }
    
}

Singleton.method1();


//分别定名空间(辨别代码)
    

闭包单体

//    应用闭包来建立单体  , 闭包重要的目标 , 庇护数据

var alogy = {};
alogy.singleton = (function () {
    
    
    //增加私有成员
    
    var a = 100;
    var fn1 = function () {
        
        console.log( a );                            
        
    }
    
    // 块级作用域里的实行效果赋值 单体对象
    return {
        attr1: 10,
        attr2: 20,
        method: function () {
            console.log( this.attr1 );
        },
        fn1: fn1
    }
        
        
})();

alogy.singleton.method();
alogy.singleton.fn1();    

惰性单体

//惰性单体 (和闭包单体相似)

//经由历程 一个私有变量来掌握是不是 实例化对象, 初始化一个 init。

var Ext = {};

Ext.Base = (function () {

//私有变量 掌握返回的单体对象
var uniqInstance;  

//须要一个构造器  init 初始化单体对象的要领
function Init () {
    
    //私有成员
    var a1 = 10;
    var a2 = true;
    
    var fun1 = function () {
        
        console.log( a1 );
        
    }
    
    return {
        attr1: a1,
        attr2: a2,
        fun1: fun1
    }
    
}

return {
    
    getInstance: function () {
        
        if ( !uniqInstance ) {  //不存在 ,建立单体实例
            
            uniqInstance = new Init();                    
            
        }
        
        return uniqInstance;
        
    }
    
}

})()

var init = Ext.Base.getInstance();

init.fun1(); //10

分支单体

//分支单体  (推断顺序的分支 - 浏览器差别的检测)
//简朴推断
var Ext = {};

var def = true; 

Ext.More = (function () {
    
    var ff = {
        attr1: 'ff'
    };
    
    var ie = {
        attr1: 'ie'
    }
    
    return def ? ff : ie;
    
})()

console.log( Ext.More.attr1 ); //ff

简朴链式编程完成

简朴链式挪用。 return this;

//简朴函数链式挪用 

function Dog () {
    
    this.run = function () {
        
        console.log( 'dog is run...' );
        
        return this;
        
    }
    
    this.eat = function () {
        
        console.log( 'dog is eat...' );
        
        return this;
        
    }
    
    this.slepp = function () {
        
        console.log('dog is sleep');
        
        return this;
        
    }
    
}

var d1 = new Dog();

d1.run().eat().slepp();
     

模仿jquery底层代码

//模仿jquery底层链式编程
    
// 函数自实行 特征:
// 1: 顺序启动时刻   内里代码自动实行
// 2: 内部的成员变量  外部没法接见 (除了不加var润饰的变量)

//块级 作用域   

(function ( window,undefined ) {
    
    //$ 最经常运用的对象  返回给外界  //大型顺序开辟   平常运用 '_'作为私有的对象
        
    function _$ ( args ) {
        
        // 婚配id 选择器
        var idSelect = /^\#[\w+]?/;
        
        this.dom;  // 吸收所取得的元素
        
        if ( idSelect.test(args) ) { //婚配胜利吸收元素  // #div 
            
            this.dom = document.getElementById(arguments[0].substr(1));
        
        } else {
            
            throw new Error('选择器不正确!');
            
        }
        
    }
    
    //在Function类上 扩大 一个可以完成 链式编程的要领
    Function.prototype.method = function ( methodName,fn ) {  //完成链式编程, 要领的名字 和  举行挪用的函数是什么
        
        this.prototype[methodName] = fn;
        
        return this; //链式编程
        
    }
    
    // 在 _$ 原型对象上  加一些大众的要领
    _$.prototype = {
        
        constructor: _$,
        
        addEvent: function ( type,cb ) {
            
            //ff chrome
            if ( window.addEventListener ) { 
                
                this.dom.addEventListener(type,cb,false);
                
            //ie
            } else if ( window.attachEvent ) { 
                
                this.dom.attachEvent('on'+type,cb);
                
            }
    
            return this;
            
        },
        
        setStyle: function ( key,val ) {
            
            this.dom.style[key] = val;
            
            return this;
            
        }
        
    }
    
    //window上注册 一个 全局变量
    window.$ = _$;
    
    //预备要领
    _$.onReady = function ( cb ) {
        
        //1,实例化  _$ 对象 ,注册到 window上
        window.$ = function ( args ) {
            
            return new _$(args); 
            
        }
        
        //2: 实行传入的代码
        cb.call(window);
        
        //3: 完成链式编程 
        _$.method('addEvent',function () {}).method('setStyle',function () {});
        
    }
    
})( window )  //顺序的进口  window传入作用域中            



$.onReady(function () {
    
    $('#div')
    .addEvent('click',function () {
        
        console.log('点击了');
        
    })
    .setStyle('background','pink')
    
});

严厉情势

严厉情势是JavaScript中的一种限制性更强的变种体式格局。
严厉情势与非严厉情势可以共存,可以逐步的选择性到场严厉情势。

全局作用域

定义变量必需经由历程var
严厉情势制止删除声明变量。

delete关键字

运用delete删除一个变量名(而不是属性名): delete myVariable

'use strict';

delete Object.prototype; // error . 
// 删除一个不可设置的属性

函数参数

定义雷同称号的参数
请求参数名唯一。
在一般情势下,末了一个重名参数名讳掩盖之前的重名参数,之前的参数依然可以经由历程arguments[i]来接见,还不是完整没法接见。

关键字,保留字

运用eval或arguments作为变量名或函数名

严厉情势下:
接见arguments.callee, arguments.caller, anyFunction.caller以及anyFunction.arguments都邑抛出非常

制止运用八进制

浏览器都支撑以零(0)开首的八进制语法:0644 == 420 另有 '\045 === '%''
以为数字的前导零没有语法意义,然则会转变数字的意义。

eval

严厉情势下不能向全局作用域下增加变量

在一般情势下,代码eval(‘var x;’) 会给上层函数或全局引入一个新的变量 x
严厉情势下,eval为被运转的代码建立变量,eval不会影响到称号映照到外部变量或别的局部变量。

var x = 22;

var evalX = eval("var x = 42; x");

console.log(x === 22);
console.log(evalX === 42);

函数内部this

在一般情势下函数挪用,this的值会指向全局对象,在严厉情势中,this的值会指向undefiend。

当函数经由历程call和apply挪用时,假如传入的是thisvalue参数是一个null和undefiend除外的原始值(字符串,数字,布尔值),则this的值会成为谁人原始值的对应的包装对象。假如thisavlue参数的值是undefeind或null,则this的值会指向全局变量。在严厉情势中,this值就是thisvalue参数的值,没有任何范例转换。

this: 仅在this指向本身建立的对象时运用它

arguments

arguments对象属性不语对应的形参变量同步更新。
非严厉情势下,修正arugmetns对象中的某个索引属性的值,和这个属性对应的形参变量的值也会同时变化。
严厉情势下,arguments对象会以形参变量的拷贝的情势被建立和初始化。因而arguments对象的转变不会影响形参。

arguments: 老是经由历程形参的名字猎取函数参数,或许在函数的第一行拷贝arguments

var args = Array.prototype.slice.call(arguments)

with

严厉情势禁用with。
with题目:块内的任何变量都可以映照到with传进来的对象的属性,也可以映照到围困这个块的作用域内的变量(以至是全局变量),在运转时才可以决议:在代码运转之前没法取得。
严厉情势下,运用with会引起语法错误。

var x = 7;
with (obj) {  // 语法错误
  // 假如没有开启严厉情势,with中的这个x会指向with上面的谁人x,照样obj.x?
  // 假如不运转代码,我们没法晓得,因而,这类代码让引擎没法举行优化,速率也就会变慢。
  x;
}

    原文作者:alogy
    原文地址: https://segmentfault.com/a/1190000005786783
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞