JavaScript-作用域链、原型链。typeof null === "object"？

喵桑丶
199 阅读8分钟

前言

距离上一次发布文章已经过去了两个月了，感觉不写都已经忘记了。近期复习了一下javaScript作用域和原型链相关的知识点。整理分享一下。

作用域

  1. 作用域就是在代码中变量与函数的可访问范围、定义的区域、即作用域控制着变量与函数的可见性和生命周期
  2. 作用域的目的：是为了提高程序的可靠性，减少命名冲突
  3. 作用域分为全局作用域和局部作用域
  4. 全局作用域：代码在程序的任何地方都能被访问，例如：直接编写在script标签之中的JS代码，都是全局作用域，或者是一个单独的JS文件，全局作用域在页面打开时创建，页面关闭时销毁，window对象的内置属性都拥有全局作用域
  • 在全局作用域中
var num = 15;
console.log(window.num) // 15

function fun() { 
    console.log('fun函数') 
}
window.fun() // fun函数
  • 所有创建的变量会作为window对象的属性保存，所有创建的函数都会作为window对象的方法保存
  1. 局部作用域：在函数内部就是局部作用域，在函数内部声明的变量只能在内部起作用，调用函数时创建函数作用域也就是局部作用域，函数执行完毕之后，函数作用域销毁
  • 局部作用域中
  • 在下方代码中，有一个全局变量a为10 在fun函数中的声明了局部变量a为20，
  • 一个是在全局作用域声明，另一个是在局部作用域下声明，虽然两个变量的命名相同，但因为不在同一个作用域下所以并没有影响
var a = 10;
function fun(){
    var a = 20;
    cosnole.log(a) // 20
}
fun();
console.log(a); // 10

作用域链

即当声明一个函数时，局部作用域一级一级向上包起来，就是作用域链，当我在局部作用域下没有找到使用的变量时就会向上层进行查找，一直找找到全局作用域下如果没有则报错 xxx is not defined

代码例子：

var a = 10;
function fun() {
    console.log(a) // var 存在变量提升 但值不提升 所以是undefined
    var a = 1;
    var b = 20;
    b++;
    function fun1() {
        console.log(b); // 去上层作用域找到了变量b b++ 此时b变成了21
        b += 6;
        function fun2() {
            console.log(b);// 去上上层作用域找到变量b b++ b+=6 此时变成了27
            console.log(a); // 去上上层作用域找到变量a 为1
        }
        fun2()
    }
    fun1()
    cosnole.log(a); // fun局部变量a 为1
}

如果使用ES6新增的let进行声明变量则会出现以下效果

let a = 10;
function fun() {
    console.log(a); // 报错
    let a = 20;
    cosnole.log(a); // 20
}
fun();
console.log(a); // 10

这里报错是因为ES6新增的let命令不存在变量提升以及暂时性死区的机制，而且let不允许在同一个作用域下重复声明

ES6的块级作用域 let实际上为JavaScript新增了块级作用域

function f1() {
    let n = 5;
    if (true) {
        let n = 10;
    }
    cosnole.log(n) // 5
}

上面的函数又两个代码块，即两个作用域，都声明了变量n，运行后输出5，这表示外层代码块不受内层代码块的影响，如果两次都使用了var定义变量a，最后输出的值才是10

原型

什么是原型呢？先写两个例子来看一下

构造函数创建对象

function Person() {
    
}
var person = new Person();
person.name = '小明';
cosnole.log(person.name); // '小明'

在这个例子中，Person是一个构造函数，我们使用new创建了一个实例对象person

protoype

  • 每个函数都有一个prototype属性 比如：
function Person() { 

}
Person.prototype.name = '小红';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name); // '小红'
console.log(person2.name); // '小红'
  • 函数的prototype属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型，也就是这个例子中的person1和person2的原型。
  • 那什么是原型呢？可以这样理解：每一个JavaScript对象（null除外）在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型“继承”属性。
  • 在下面这张图中表示构造函数和实例原型之间的关系

image.png

  • prototype属性的设计目的就是为了保存实例的原型对象，以原型的机制将公共属性和方法提供给每个实例使用。

那么我们该怎么表示实例与实例原型，也就是person和Person.prototype之间的关系呢，这时候我们就要讲到第二个属性：

proto

这是每一个JavaScript对象（除了null）都具有的一个属性，叫_proto_，这个属性会指向该对象的原型。

function Person(){
    
}
var person = nwe Person();
console.log(person.__proto__ === Person.prototype); // true

我们更新一下关系图

image.png

既然实例对象和构造函数都可以指向原型，那么原型是否有属性指向构造函数或者实例呢？

constructor

指向实例倒是没有，因为一个构造函数可以生成多个实例，但是原型指向构造函数倒是有的，这就要讲到第三个属性：constructor，每个原型都有一个constructor属性指向关联的构造函数

function Person(){

}
console.log(Person === Person.prototype.constructor); // true

再次更新关系图

image.png 综上我们已经得出

function Person() {

}
var person = new Person();

console.log(person.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true
// ES5的方法，可以获取对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype); // true

了解了构造函数、实例原型、和实例之间的关系，接下来我们讲讲实例和原型的关系：

实例与原型

当我们在读取实例的属性时，如果找不到，就会在与对象关联的原型中的属性查找。如果还查不到，就去原型的原型，一直找到顶层为止。

例子：

function Person(){

}
Person.prototype.name = '小木'
var person = new Person();
person.name = '小乖'
console.log(person.name); // 小乖

delete person.name;
console.log(person.name); // 小木

在这个例子中，我们给实例对象person添加了name属性，当我们打印的时候，结果自然为小乖

但是当我们删除了person的name属性时，读取person.name时，从person实例对象中找不到name属性就会去person对象的原型也就是person.proto也就是Person.prototype中查找，因为在上面我们给Person.prototype添加了name属性，所以找到了，结果为小木， 但是万一还没有找到呢？原型的原型又是什么？

原型的原型

我们在前面说了原型也是一个对象，既然是对象，我们就可以用最原始的方式创建它

var obj = new Object();
obj.name = '阿正'
console.log(obj.name); // 阿正

其实原型对象就是通过Object构造函数生成的，结合之前所讲，实例的proto指向构造函数的prototype，所以我们再更新下关系图：

image.png

原型链

那Object.prototype的原型呢？其实是null 我们可以打印：

console.log(Object.prototype.__proto__ === null); // true

引用了阮一峰老师的《undefined与null的区别》就是：

null表示"没有对象"，即该处不应该有值"

所以Object.prototype.proto的值为null跟Object.prototype没有原型其实是一个意思。 所有查找属性的时候查到Object.prototype就可以停止查找了。

最后一张关系图为：

image.png 图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线

总结

原型：

  • 每个构造函数都有一个prototype属性、这个属性指向一个对象、即原型对象。
  • 原型对象默认拥有一个constructor属性、指向指向它的那个构造函数（也就是说构造函数和原型对象是互相指向的关系）

原型链：

  • 访问一个对象的属性时,先在基本属性中查找,如果没有,在沿着-proto-这条链向上找,也就是说-proto-的路径就叫原型链。
  • 原型链终点：Object.prototype 但它也有-proto-，指向null，那才是原型链的终点，null即空值

补充

constructor

function Person(){

}
var person = new Person();
console.log(person.constructor === Person); // true

当获取person.constructor时，其实person身上并没有constructor属性，当读取不到cosntructor属性的时候，会从person的原型也就是Person.prototype中读取，刚好原型中有该属性，所以 person.constructor === Person.prototype.cosntructor

proto

然后是__proto__，绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于Person.prototype中，实际上，它是来自于Object.prototype，与其说是一个属性，不如说是一个getter/setter，当使用obj.proto时，可以理解成返回了Object.getPrototypeOf(obj);

真的是继承吗？

最后是关于继承，前面我们讲到“每一个对象都会从原型‘继承’属性”，实际上，继承是一个十分具有迷惑性的说法，引用《你不知道的JavaScript》中的话，就是：

继承意味着复制操作，然而 JavaScript 默认并不会复制对象的属性，相反，JavaScript 只是在两个对象之间创建一个关联，这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。

typeof null === 'object'

typeof null === 'object' 这是为什么呢？在《你不知道的JavaScript》中有一段解释

原理是这样的，不同的对象在底层都表示为二进制，在JavaScript中二进制前三位都为0的话会被判断为object类型，null的二进制表示全是0，自然前三位也是0，所以执行typeof null 为object

typeof null === 'object' 是一个历史遗留问题，这个判断是最初的js引擎的一个bug，后来的js引擎经过各种改版，已经不适用这种方式标记变量类型了

完结

如果有帮助到你，请点个小赞哦，感谢。

avatar
文章
阅读
粉丝