javascript中的原型和原型链(五)

时间:2022-12-09 14:35:23

Array.prototype


 

先记住一句话——每一个函数,都有一个prototype属性——每一个函数,无论是你自定义的,还是系统内置的

var fn = function() {}
console.log( fn.prototype );

这里打印出来的fn.prototype是一个对象,只有一个constructor属性,指向该函数自身,即

fn.prototype.constructor === fn

  

javascript中的原型和原型链(五)

以上是自定义的函数,数组构造函数Array也是一个函数,只不过是浏览器内置的函数,它也得符合以上那句话

console.log( typeof Array );   // 'function'
console.log( Array.prototype );

这里打印出来的Array.prototype也是一个对象,也有一个constructor属性,指向该函数自身

javascript中的原型和原型链(五)

[].__proto__


 

然后,再记住一句话——所有通过函数new出来的东西,这个东西都有一个__proto__指向这个函数的prototype,这里我们给他们分别取一个中文名字

  • prototype (显示)原型
  • __proto__ 隐式原型
var arr = [];  // 等价于 var arr = new Array()
arr.__proto__ === Array.prototype;  // true 

javascript中的原型和原型链(五)

然后,再记住一句话——当你想要使用一个对象(或者一个数组)的某个功能时:如果该对象本身具有这个功能,则直接使用;如果该对象本身没有这个功能,则去__proto__中找

var obj = {
    fn1: function () {
        console.log('fn1');
    }
};
obj.fn1();  // 'fn1'
obj.toString();  // '[object Object]'  (在 obj.__proto__ 中找到)

数组也一样

var arr = [];
arr.push(1);   // 在 arr.__proto__ 中找到了 push  方法

这就是为何数组会有concatpush等方法,顺藤摸瓜最终摸到了Array.prototype中来了

因此,下列代码是成立的

[].concat === Array.prototype.concat;
[].push === Array.prototype.push;
[].map === Array.prototype.map;

__proto__是可修改的


 

__proto__就是一个基本的js对象,根据js无底线的语法规则,它是完全可以被修改或者重写的

javascript中的原型和原型链(五)

修改__proto__的例子。修改了之后,arr不仅有内置的concatpush等功能,还多了一个addClass功能。

var arr = [1,2,3];
arr.__proto__.addClass = function () {
    console.log(123);
}
arr.push(4);
arr.addClass();   // 123

完全重写 __proto__ 的例子,上一节讲过。还是注意,重写__proto__之后,arr可就失去了concatpush等亲人了,只有一个addClass功能了。

var arr = [1,2,3];
arr.__proto__ = {
    addClass: function () {
        console.log(123);
    }
};
arr.addClass();   // 123