• JavaScript中常见易犯的小错误


    JavaScript中常见易犯的小错误

    1.比较运算符
    JavaScript中一个比较便捷的地方,便是它可以给每一个在比较运算的结果变量强行转化成布尔类型。但是从另一方面来考虑,有时候它也会为我们带来很多不便,下面的这些例子便是一些一直困扰很多程序员的代码实例:

    console.log(false == '0');

    console.log(null == undefined);

    console.log(" " == 0);

    console.log('' == 0); // And these do too!

    if ({}) // ...

    if ([]) // ...

    最后两行的代码虽然条件判断为空(经常会被人误认为转化为false),但是其实不管是{ }还是[ ]都是一个实体类,而任何的类其实都会转化为true。就像这些例子所展示的那样,其实有些类型强制转化非常模糊。因此很多时候我们更愿意用 === 和 !== 来替代== 和 !=, 以此来避免发生强制类型转化。. ===和!== 的用法和之前的== 和 != 一样,只不过他们不会发生类型强制转换。另外需要注意的一点是,当任何值与 NaN 比较的时候,甚至包括他自己,结果都是false。因此我们不能用简单的比较字符来决定一个值是否为 NaN 。我们可以用内置的 isNaN() 函数来辨别:

    console.log(NaN == NaN); // false
    console.log(NaN === NaN); // false
    console.log(isNaN(NaN)); // true

    2.关于原型继承问题

    很大一部分的js开发者都不能完全掌握原型的继承问题。下面具一个例子来说明:

    BaseObject = function(name) {
    if(typeof name !== "undefined")
    { this.name = name; }
    else
    { this.name = 'default' } };

    这段代码看起来很简单。如果你有name值,则使用它。如果没有,则使用 ‘default’:

    var firstObj = new BaseObject();
    var secondObj = new BaseObject('unique');
    console.log(firstObj.name); // -> 结果是'default'
    console.log(secondObj.name); // -> 结果是 'unique'

    但是如果我们执行delete语句呢:

    delete secondObj.name;

    我们会得到:

    console.log(secondObj.name); // -> 结果是 'undefined'

    但是如果能够重新回到 ‘default’状态不是更好么? 其实要想达到这样的效果很简单,如果我们能够使用原型继承的话:

    BaseObject = function (name)
    { if(typeof name !== "undefined")
    { this.name = name; } };
    BaseObject.prototype.name = 'default';
    

    在这个版本中, BaseObject 继承了原型中的name 属性, 被设置为了 'default'.。这时,如果构造函数被调用时没有参数,则会自动设置为 default。相同地,如果name 属性被从BaseObject移出,系统将会自动寻找原型链,并且获得 'default'值:

    var thirdObj = new BaseObject('unique');
    console.log(thirdObj.name);
    delete thirdObj.name;
    console.log(thirdObj.name); // -> 结果是 'default'
    

    3.为实例方法创建错误的指引

    我们来看下面一段代码:

    var MyObject = function() {}
    MyObject.prototype.whoAmI = function() {
    console.log(this === window ? "window" : "MyObj"); };
    var obj = new MyObject();
    

    现在为了方便起见,我们新建一个变量来指引 whoAmI 方法, 因此我们可以直接用 whoAmI() 而不是更长的obj.whoAmI(): 

    var whoAmI = obj.whoAmI;
    

    接下来为了确保一切都如我们所预测的进行,我们可以将 whoAmI 打印出来:

    console.log(whoAmI);
    

    结果是:

    function () { console.log(this === window ? "window" : "MyObj"); }
    

    没有错误!
    但是现在我们来查看一下两种引用的方法:

    obj.whoAmI(); // 输出 "MyObj" (as expected)
    whoAmI(); // 输出 "window" (uh-oh!)
    

    哪里出错了呢?
    原理其实和上面的第二个常见错误一样,当我们执行 var whoAmI = obj.whoAmI;的时候,新的变量 whoAmI 是在全局环境下定义的。因此它的this 是指window, 而不是obj!

    正确的编码方式应该是:

    var MyObject = function() {}
    MyObject.prototype.whoAmI = function() {
    console.log(this === window ? "window" : "MyObj"); };
    var obj = new MyObject();
    obj.w = obj.whoAmI; // still in the obj namespace obj.whoAmI(); // 输出 "MyObj" (as expected)
    obj.w(); // 输出 "MyObj" (as expected)
    

    4.用字符串作为setTimeout 或者 setInterval的第一个参数

    首先我们要声明,用字符串作为这两个函数的第一个参数并没有什么语法上的错误。但是其实这是一个非常低效的做法。因为从系统的角度来说,当你用字符串的时候,它会被传进构造函数,并且重新调用另一个函数。这样会拖慢程序的进度。

    setInterval("logTime()", 1000);
    setTimeout("logMessage('" + msgValue + "')", 1000);
    

    另一种方法是直接将函数作为参数传递进去:

    setInterval(logTime, 1000);
    setTimeout(function() {
    logMessage(msgValue); }, 1000);
    

    5.忽略 “strict mode”的作用

    “strict mode” 是一种更加严格的代码检查机制,并且会让你的代码更加安全。当然,不选择这个模式并不意味着是一个错误,但是使用这个模式可以确保你的代码更加准确无误。
    下面我们总结几条“strict mode”的优势:
    1. 让Debug更加容易:在正常模式下很多错误都会被忽视掉,“strict mode”模式会让Debug极致更加严谨。
    2. 防止默认的全局变量:在正常模式下,给一个为经过声明的变量命名将会将这个变量自动设置为全局变量。在strict模式下,我们取消了这个默认机制。
    3. 取消this的默认转换:在正常模式下,给this关键字指引到null或者undefined会让它自动转换为全局。在strict模式下,我们取消了这个默认机制。
    4. 防止重复的变量声明和参数声明:在strict模式下进行重复的变量声明会被抱错,如(e.g., var object = {foo: "bar", foo: "baz"};) 同时,在函数声明中重复使用同一个参数名称也会报错,如 (e.g., function foo(val1, val2, val1){}),
    5. 让eval()函数更加安全。
    6. 当遇到无效的delete指令的事后报错:delete指令不能对类中未有的属性执行,在正常情况下这种情况只是默默地忽视掉,而在strict模式是会报错的。

    爱前端,爱代码
  • 相关阅读:
    Html
    git和github简易教程
    Java基础
    如何学习一门语言
    leetcode题解(持续更新)
    浅谈安全威胁+引子
    内网渗透基础
    Java运算符
    Java修饰符
    Java变量类型
  • 原文地址:https://www.cnblogs.com/jtr122624520/p/5941049.html
Copyright © 2020-2023  润新知