面试准备一、JavaScript原型与原型链总结

161 阅读2分钟

近期打算找工作,遂打算总结一下JavaScript的基础知识。

JavaScript语言可以识别为7种不同类型的值:

  • 六种原始数据类型(值类型)
    • Boolean
    • null
    • undefined
    • Number
    • String
    • Symbol (在ES6中新添加的类型)
  • 以及Object类型 (一切引用类型

使用 typeof 操作符判断值类型,但需要注意。

typeof []  //"object"
typeof function(){}  //"function"
typeof {}  //"object"
typeof Function  //"function"
typeof Array  //"function"
typeof null  //"object"

对象都是通过函数创建的,例如:

// 常用的对象字面量声明对象实际是语法糖
var obj = {
    a: 1, 
    b: 2
}
// 本质是
var obj = new Object();
obj.a = 1;
obj.b = 2;

每个函数创立的时候都有一个默认的属性prototype即原型,prototype的值是一个对象,该对象默认的只有一个叫做constructor的属性,指向这个函数的本身

function Fn() {};
Fn.prototype = {
    constructor: Fn
}

每个对象都有一个属性__proto____proto__的值引用了创建这个对象的函数的prototype

var obj = new Object();
obj.__proto__ === Object.prototype;  // true
// 函数也是对象,所以函数也有__proto__
var fn = new Fn();
fn.__proto__ === Fn.prototype;  // true

需要注意Object.prototype是一个特例——它的__proto__指向的是null!

对于上述的值类型可以使用typeof判断其类型,但是判断引用类型的时候返回值只有object或者function,怎样判断该值是否为array?这里需要用到instanceof

语法:

object instanceof constructor

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。 instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

// 因为 [].__proto__ === Array.prototype
[] instanceof Array // true

访问一个对象的属性时,现在基本属性中查找,如果没有,再沿着__proto__这条链向上找,这就是原型链

function Fn() {};
var fn = new Fn();
fn.a = 1;

Fn.prototype.a = 2;
Fn.prototype.b = 3;
// fn自身属性有a,所以不向上查找直接取a为1,fn自身属性没有b,沿着__proto__查找,fn.__proto__的值为Fn.prototype,查找到,所以fn.b为3
fn.a; // 1
fn.b; // 3

区分一个对象的属性是本身还是从原型中找到的需要使用hasOwnProperty,这个属性继承自Object.prototype。由于所有的对象的原型链都会找到Object.prototype,因此所有的对象都会有Object.prototype的方法。这就是所谓的“继承”。

同理还有函数的Function.prototype的方法

参考:
深入理解javascript原型和闭包