JS高级技巧(简洁版)
安全的类型检测
JS内置的类型检测机制并不是完全可靠的
typeof
操作符返回一个字符串，表示未经计算的操作数的类型，在大多数情况下很靠谱，但是当然还有例外
正则表达式
1 2 | typeof /s/ === 'function'; // Chrome 1-12 , 不符合 ECMAScript 5.1 typeof /s/ === 'object'; // Firefox 5+ , 符合 ECMAScript 5.1 |
NULL
1 | typeof null === 'object'; // 从一开始出现JavaScript就是这样的 |
在 JavaScript 最初的实现中，JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针（大多数平台下值为 0x00），因此，null的类型标签也成为了 0，typeof null就错误的返回了object
instanceof
运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性
语法
object instanceof constructor(要检测的对象 instanceof 构造函数)
但是在浏览器中，我们的脚本可能需要在多个窗口之间进行交互。多个窗口意味着多个全局环境，不同的全局环境拥有不同的全局对象，从而拥有不同的内置类型构造函数。这可能会引发一些问题。
1 | [] instanceof window.frames[0].Array //false |
因为 Array.prototype !== window.frames[0].Array.prototype，因此你必须使用 Array.isArray(myObj) 或者 Object.prototype.toString.call(myObj) === "[object Array]"来判断myObj是否是数组
解决以上两个问题的方案就是Object.prototype.toString
Object.prototype.toString
方法返回一个表示该对象的字符串
可以通过toString() 来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString() 来检测，需要以 Function.prototype.call() 或者 Function.prototype.apply()的形式来调用，传递要检查的对象作为第一个参数，称为thisArg
1 2 3 4 5 6 7 8 9 10 11 | var toString = Object.prototype.toString; toString.call(new Date); // [object Date] toString.call(new String); // [object String] toString.call(Math); // [object Math] toString.call(/s/); // [object RegExp] toString.call([]); // [object Array] //Since JavaScript 1.8.5 toString.call(undefined); // [object Undefined] toString.call(null); // [object Null] |
作用域安全的构造函数
构造函数其实就是一个使用new操作符调用的函数。当使用new调用时，构造函数内用到的this对象会指向新创建的对象实例
1 2 3 4 5 6 7 8 | function Person(name, age){ this.name = name; this.age = age; } let person = new Person("addone", 20); person.name // addone |
当你使用new操作符的时候，就会创建一个新的Person对象，同时分配这些属性，但是如果你没有使用new
1 2 3 4 | let person = Person("addone", 20); person1.name // Cannot read property 'name' of undefined window.name // addone |
这是因为this是在执行时确认的，当你没有使用new，那么this在当前情况下就被解析成了window，属性就被分配到window上了
作用域安全的构造函数在进行更改前，首先确认this对象是正确类型的实例，如果不是，就创建新的对象并且返回
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function Person(name, age){ if(this instanceof Person){ this.name = name; this.age = age; }else{ return new Person(name, age); } } let person1 = new Person("addone", 20); person1.name // addone let person2 = Person("addone", 20); person2.name // addone |
this instanceof Person检查了this对象是不是Person的实例，如果是则继续，不是则调用new
惰性载入函数
假如你要写一个函数，里面有一些判断语句
1 2 3 4 5 6 7 | function foo(){ if(a != b){ console.log('aaa') }else{ console.log('bbb') } } |
如果你的a和b是不变的，那么这个函数不论执行多少次，结果都是不变的，但是每次执行还要进行if判断，这就造成了不必要的浪费。
惰性载入表示函数执行的分支只会发生一次，这里有两种解决方式。
在函数被调用时再处理函数
1 2 3 4 5 6 7 8 9 10 11 12 | function foo(){ if(a != b){ foo = function(){ console.log('aaa') } }else{ foo = function(){ console.log('bbb') } } return foo(); } |
这样进入每个分支后都会对foo进行赋值，覆盖了之前的函数，之后每次调用foo就不会再执行if判断
在声明函数时就指定适当的函数
1 2 3 4 5 6 7 8 9 10 11 | var foo = (function foo(){ if(a != b){ return function(){ console.log('aaa') } }else{ return function(){ console.log('bbb') } } })(); |
这里创建一个匿名，自执行的函数，用来确定应该使用哪一个函数来实现。
惰性函数的优点就是只在第一次执行分支时牺牲一点点性能
函数绑定
请使用fun.bind(thisArg[, arg1[, arg2[, ...]]])
thisArg
当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时，该参数无效
arg1,arg2,...
当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法
返回
由指定的this值和初始化参数改造的原函数拷贝
一个例子
1 2 3 4 5 6 7 8 9 | let person = { name: 'addone', click: function(e){ console.log(this.name) } } let btn = document.getElementById('btn'); EventUtil.addHandle(btn, 'click', person.click); |
这里创建了一个person对象，然后将person.click方法分配给DOM按钮的事件处理程序，当你点击按按钮时，会打印出undefiend，原因是执行时this指向了DOM按钮而不是person
解决方案： 将this强行指向person
1 | EventUtil.addHandle(btn, 'click', person.click.bind(person)); |
函数柯里化
函数柯里化是把接受多个参数的函数转变成接受单一参数的函数
1 2 3 4 5 6 7 8 | function add(num1, num2){ return num1 + num2; } function curryAdd(num2){ return add(1, num2); } add(2, 3) // 5 curryAdd(2) // 3 |
这个例子用来方便理解柯里化的概念
下面是创建函数柯里化的通用方式
1 2 3 4 5 6 7 8 | function curry(fn){ var args = Array.prototype.slice.call(arguments, 1); return function(){ let innerArgs = Array.prototype.slice.call(arguments); let finalArgs = args.concat(innerArgs); return fn.apply(null, finalArgs); } } |
第一个参数是要进行柯里化的函数，其他参数是要传入的值。这里使用Array.prototype.slice.call(arguments, 1)来获取第一个参数后的所有参数(外部)。在返回的函数中，同样调用Array.prototype.slice.call(arguments)让innerArgs来存放所有的参数(内部)，然后用concat将内部外部参数组合，用apply传递给函数
1 2 3 4 5 6 7 8 | function add(num1, num2){ return num1 + num2; } let curryAdd1 = curry(add, 1); curryAdd1(2); // 3 let curryAdd2 = curry(add, 1, 2); curryAdd2(); // 3 |
防篡改对象
Javascript中任何对象都可以被同一环境中运行的代码修改，所以开发人员有时候需要定义防篡改对象（tamper-proof object) 来保护自己
不可扩展对象
默认情况下所有对象都是可以扩展的(添加属性和方法)
1 2 | let person = { name: 'addone' }; person.age = 20; |
第二行为person对象扩展了age属性，当然你可以阻止这一行为，使用Object.preventExtensions()
1 2 3 4 5 | let person = { name: 'addone' }; Object.preventExtensions(person); person.age = 20; person.age // undefined |
你还可以用Object.isExtensible()来判断对象是不是可扩展的
1 2 3 4 5 | let person = { name: 'addone' }; Object.isExtensible(person); // true Object.preventExtensions(person); Object.isExtensible(person); // false |
请记住这是不可扩展!!，即不能添加属性或方法
密封的对象
密封对象不可扩展，且不能删除属性和方法
1 2 3 4 5 6 7 8 | let person = { name: 'addone' }; Object.seal(person); person.age = 20; delete person.name; person.age // undefined person.name // addone |
相对的也有Object.isSealed()来判断是否密封
1 2 3 4 5 6 7 | let person = { name: 'addone' }; Object.isExtensible(person); // true Object.isSealed(person); // false Object.seal(person); Object.isExtensible(person); // false Object.isSealed(person); // true |
冻结的对象
这是最严格的防篡改级别，冻结的对象即不可扩展，又密封，且不能修改
1 2 3 4 5 6 7 8 9 | let person = { name: 'addone' }; Object.freeze(person); person.age = 20; delete person.name; person.name = 'addtwo' person.age // undefined person.name // addone |
同样也有Object.isFrozen来检测
1 2 3 4 5 6 7 8 9 |
上一篇：js运算符的一些特殊用法 热门文章Copyright @甘肃明星软件开发有限公司 全国统一服务热线：400-633-9193 E-mail：417560663@qq.com 网站备案：陇ICP备2021002704号-1  甘公网安备 62010202002545号 |