Array.prototype


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

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

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

fn.prototype.constructor === fn

  

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

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

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

[].__proto__


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

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

然后,再记住一句话——当你想要使用一个对象(或者一个数组)的某个功能时:如果该对象本身具有这个功能,则直接使用;如果该对象本身没有这个功能,则去__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无底线的语法规则,它是完全可以被修改或者重写的

修改__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

  

javascript中的原型和原型链(五)的更多相关文章

  1. Javascript中的对象和原型(3)

    在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...

  2. Javascript中的对象和原型(三)(转载)

    在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...

  3. Javascript中的对象和原型(一)(转载)

    面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...

  4. javascript中的对象,原型,原型链和面向对象

    一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...

  5. JavaScript中的继承(原型链)

    一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...

  6. 深入理解JavaScript中的继承:原型链篇

    一.何为原型链 原型是一个对象,当我调用一个对象的方法时,如果该方法没有在对象里面,就会从对象的原型去寻找.JavaScript就是通过层层的原型,形成原型链. 二.谁拥有原型 任何对象都可以有原型, ...

  7. JavaScript中的继承与原型链

    先看一个例子 function User(){} var u1 = new User(); console.log(u1.prototype);// undefined 使用对象实例无法访问到prot ...

  8. javascript中的构造函数和原型及原型链

    纯属个人理解,有错误的地方希望大牛指出,以免误人子弟 1.构造函数: 构造函数的作用 : 初始化由new创建出来的对象    new 的作用: 创建对象(空对象) new 后面跟的是函数调用,使用ne ...

  9. JavaScript中的对象与原型—你不知道的JavaScript上卷读书笔记(四)

    一.对象 对象可以通过两种形式定义:声明(文字)形式和构造形式.即: var myObj = { key: value // ... }; 或: var myObj = new Object(); m ...

  10. JavaScript——中的prototype(原型)

    JS中的prototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...

随机推荐

  1. shell提升篇

    6. 条件判断 1.基本语法 [ condition ](注意condition前后要有空格) 注意:条件非空即为true,[ fsdm ]返回true,[] 返回false. 2. 常用判断条件 ( ...

  2. ABC143F Distinct Numbers

    这道题非常好.其思想类似于 $O(n \log n)$ 求最长上升子序列的算法. hint:考虑固定操作次数 $o$,$k$ 最大可取到多少? int n; scan(n); vi a(n); sca ...

  3. Go语言中的map(十一)

    map是一种无序的基于 key-value 的数据结构,Go语言中的map是引用类型,所以跟切片一样需要初始化才能使用. 定义map 定义 map 的语法如下: map[keyType]ValueTy ...

  4. nginx配置ssi实现页面拆分

    在做一个网站时,页面上会有很多重复的内容,每个页面写一遍很冗余,修改时还容易遗漏,所以可以把公共的部分写好,放在单独的HTML中,用时引用就行了. nginx配置ssi可以将单个页面拆分成一个一个的小 ...

  5. 基于MatConvNet的CNN图像搜索引擎PicSearch

    简介 Picsearch是一种基于卷积神经网络特征的图像搜索引擎. Github:https://github.com/willard-yuan/CNN-for-Image-Retrieval Web ...

  6. idea 去除重复代码提醒

  7. Makoto and a Blackboard CodeForces - 1097D (积性函数dp)

    大意: 初始一个数字$n$, 每次操作随机变为$n$的一个因子, 求$k$次操作后的期望值. 设$n$经过$k$次操作后期望为$f_k(n)$. 就有$f_0(n)=n$, $f_k(n)=\frac ...

  8. JS定时器的用法及示例

    JS定时器的用法及示例 目录 js 定时器的四个方法 示例一 示例二 示例三 js 定时器的四个方法 setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函 ...

  9. linux无界面模式安装selenium+chrome+chromedriver并成功完成脚本(亲测可用)

    环境:docker centos 7.4 能通外网 写好的selenium脚本. 具体步骤: 一:安装selenium  这是最简单的 直接利用 pip3 install selenium 二 安装c ...

  10. 18、远程管理卡、戴尔划RAid

    1.配置远程管理卡: 第一个iDRAC6是远程控制卡名称 第三个LAN ...是配置远程控制卡的 下图配置结束按Esc退出 最后按Esc保存退出 2.windows配置远程管理卡: 把下载下来的软件安 ...