前言

之前打某湖论剑,两道js的题,给我整懵逼了,发现以前都没对js做过多少研究,趁着被毒打了,先研究一波js原型链,未雨绸缪。

基础protype

首先我们研究js原型链,得搞明白原型是什么,这里借用p神的举的一个例子:
在javascript中,我们定义一个类,需要以定义“构造函数”的方式来定义:

function Foo() {    this.bar = 1}new Foo()

Foo()函数的内容就是构造函数的内容,this.bar是Foo的一个属性,学过c++的应该很容易理解,而且后面对原型链的利用也可以仿造c++类的思想来理解。

一个类必然有方法,我们可以在构造函数里定义方法:

function Foo() {    this.bar = 1    this.show = function() {        console.log(this.bar)    }}

在js里,这样定义有一个特点,就是这个方法并不是绑定在类上,而是每创建一个对象,这个方法就会定义一次,这样就很浪费资源,我们要让它只定义一次,就需要用到原型prototype,这个prototype可以认为是一个类的属性,通过类创建的对象都将”继承”prototype的内容。

function Foo() {    this.bar = 1}Foo.prototype.show = function show() {    console.log(this.bar)}

__proto__

那么__proto__是干什么用的?原来由类实例化的对象是无法直接访问到类的原型也就是prototype,我们可以看到foo没有prototype

这时__proto__就是对象访问类原型的媒介了

以上大概就是原型的内容,读者把原型的概念弄懂后再去看原型链污染会有不一样的结果

原型链继承

以上讲的prototype在js里其实主要是用来实现继承机制,这个继承跟c++的继承不太一样,js的继承可以改掉Object类导致原型链污染,而c++的继承是可以对父类的方法进行进行重写或重载,但不会直接就把父类给改写了,因为这个特性,这才有了原型链污染的诞生。这里举个例子:

function Father() {    this.first_name = 'Donald'    this.last_name = 'Trump'}function Son() {    this.first_name = 'Melania'}Son.prototype = new Father()let son = new Son()console.log(`Name: ${son.first_name} ${son.last_name}`)

这里Son继承了Father的last_name

这里通过__proto__给Object添了个last_name

这里推导一下:
son.__proto__ == Son.prototype
son.__proto__.__proto__ == Father.prototype
son.__proto__.__proto__.__proto__ == Object
所以后面我们new的a,它有一个last_name是继承Object的,这里有趣的是,改写了Object后,Father.last__name == john,但是son.last_name == Trump,直接看Father函数,其实它的last_name并没有变化

这就有趣了,但重新new Father,它的last_name其实也是没变的

但我们还是成功污染了的,Object多了个last_name属性,此后新建的类都将继承这个属性,在某些地方是会造成危害的

原型链污染实例

在什么地方我们可以使用原型链污染?其实当有我们可以控制的”键名”,并存在有赋值修改操作的地方,我们可以实现这个操作,这里举个js的merge函数经典例子:

function merge(target, source) {    for (let key in source) {        if (key in source && key in target) {            merge(target[key], source[key])        } else {            target[key] = source[key]        }    }}

以上是一个简单的合并函数,我们可以看到target[key] = source[key],其实这个地方就存在原型链污染,如果key是__proto__的话,是不是就能修改到Object,这里给个例子:

let o1 = {}let o2 = {a: 1, "__proto__": {b: 2}}merge(o1, o2)console.log(o1.a, o1.b)o3 = {}console.log(o3.b)

这里我们合并成功了,但是并没有污染到Object,原因是__proto__没有被当成键名,而是当成原型,也就是遍历键名的时候只有a,b是键名。

为了让__proto__也被当成键名,我们可以把o2的值设置成json的格式,遍历json的时候,__proto__就会被当成键名,从而改写Object,例子如下:

let o1 = {}let o2 = JSON.parse('{"a": 1, "__proto__": {"b": 2}}')merge(o1, o2)console.log(o1.a, o1.b)o3 = {}console.log(o3.b)

成功改写Object,导致o3有了b属性

总结

以上就是js原型链的基础内容,把基础打好,之后遇见原型链的题将会成长很快。