JavaScript 基本功--面试宝典

2024年3月28日 141次阅读 来源: 源泉

JavaScript数据类型

JavaScript中有哪些基本数据类型

undefined、null、number、string、boolean、symbol(es6中新增)
为啥没有object、array、function？他们都属于复杂的数据类型。看起来有点咬文嚼字。

typeof 操作符对各个数据类型的操作结果

string————————-string
number————————-number
boolean————————boolean
function———————–function
undefined———————-undefined
null—————————object （null值表示一个空对象指针）
array————————–object
object————————-object
因此，有些时候typeof并不能准确的判断某个变量的数据类型。

如何区分null和undefined

通过上边可以看出，使用typeof就可以判断区null和undefined了。
还可以通过null === undefined这种方式来判断。

如何准确的判断一个变量的数据类型

JavaScript 中所有变量都可以当作对象使用，除了 null 和 undefined 两个例外。所以我们可以使用对象原型链上的toString方法来将一个变量转化成字符串，然后区分他们的类型。
Object.prototype.toString.call(*);示例：

Object.prototype.toString.call(null)           //  "[object Null]"
Object.prototype.toString.call(undefined)      //  "[object Undefined]"

*在IE8中两者结果都为 “[object Object]”
因此，我们也可以用这个方法来区分null和undefined

对象创建和使用

创建对象

var obj1 = {x:1,'long name':2};
var obj2 = new Object();
var obj3 = Object.create(obj2);

访问对象属性

obj1.x                // 1
obj1["long name"]     // 2 注意，如果属性名有空格或者中划线什么的就只能使用这种方式了

删除对象属性

delete obj1.x         // 删除对象属性的唯一方法是delete

继承与原型链

前边我们说了，可以认为 JavaScript 中万物皆对象。每个对象都有一个私有 Prototype。它持有一个连接到另一个称为其 prototype 对象（原型对象）的链接。该 prototype 对象又具有一个自己的原型，层层向上直到一个对象的原型为 null。
继承
上边创建对象以及可以看到使用 Object.create 可以实现继承。还有可以使用Object.prototype来实现继承。示例：

var obj = {a:1}
function P(name){    // 构造函数
    this.name = name
}
P.prototype = obj  // 继承obj
var p = new P('wesley');     // 实例对象
p.a                  // 1

其次，我们还可以使用es6中的新语法class等关键字来实现继承。
原型链
原型链的定义复杂拗口，我们可以通过 JavaScript 的非标准但许多浏览器实现的属性__proto__来理解原型链。
对象的__proto__属性是该对象的构造函数的prototype属性。基于上边构造函数继承代码：

console.log(p.__proto__ === P.prototype)                       // true
console.log(P.prototype === obj)                               // true
console.log(P.prototype.__proto__ === Object.prototype)        // true
console.log(Object.prototype.__proto__ === null)               // true

作用域与命名空间

如果了解es6的let用法，那么就应该只要 JavaScript 有块级作用域和函数作用域。简单来说通常我们使用var创建的变量都属于函数作用域。
什么是块级作用域呢？其实可以简单理解为一对花括号包围的代码块的作用范围内。
JavaScript 中没有显式的命名空间定义，这就意味着所有对象都定义在一个全局共享的命名空间下面。
每次引用一个变量，JavaScript 会向上遍历整个作用域直到找到这个变量为止。 如果到达全局作用域但是这个变量仍未找到，则会抛出 ReferenceError 异常。
隐式的全局变量

foo1 = 1;
var foo2 = 2;   // 如果是在函数内部  就是局部变量
let foo3 = 3;   // 如果是在代码块内  就是局部变量

可以通过如下代码的执行结果来理解let和var

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

如果使用let

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

变量声明提升
var 表达式和 function 声明都将会被提升到当前作用域的顶部。要注意的是 let 表达式并不会被提升。
这也正好可以说明如下代码可以正常执行：

test();
function test(){
    console.log(a)
    var a = 5;
}

可以理解为提升后的代码：

function test(){
  var a;  // 此时a为undefined  所以我们打印的时候就是undefined了
  console.log(a)
  a = 5;
}
test();

不使用var申明的变量提升示例：

test();
function test(){
  b = 5
}
console.log(b)
// 5

可以理解为提升后：

var b;  // undefined
(function test(){
  b = 5
})()
console.log(b)

闭包

闭包是 JavaScript 一个非常重要的特性，这意味着当前作用域总是能够访问外部作用域中的变量。
可以理解为访问你本不能够访问到的东西，就是一个闭包。示例：

function Counter(start) {
    var count = start;
    return {
        increment: function() {
            count++;
        },

        get: function() {
            return count;
        }
    }
}

var foo = Counter(4);   // 此时如果我们在外部直接 console.log(count) 是会抛错的
foo.increment();
foo.get(); // 5

这里，Counter 函数返回两个闭包，函数 increment 和函数 get。这两个函数都维持着对 Counter 函数内部作用域的引用。
所以如果需要访问或者说获取Counter中的变量count，只能通过闭包的方式。
关于闭包，有个很经典的例子：

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
// 10个10

*想想，为什么。具体可以看：https://segmentfault.com/a/11…
setTimeout 和 setInterval
由于 JavaScript 是异步的，可以使用 setTimeout 和 setInterval 来计划执行函数。
*注意: 定时处理不是 ECMAScript 的标准，它们在 DOM (文档对象模型) 被实现。

function foo() {}
var id = setTimeout(foo, 1000); // 返回一个大于零的数字

当 setTimeout 被调用时，它会返回一个 ID 标识并且计划在将来大约 1000 毫秒后调用 foo 函数。 foo 函数只会被执行一次。
所以，通常我们可以认为被setTimeout执行的函数是会被异步执行的。

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