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. [Python3 练习] 011 利用异常解题

    目录 函数式编程 Functional Programming 1. 简介 2. 函数 3. 匿名函数 3.1 lambda 表达式也称"匿名函数" 3.2 lambda 表达式的 ...

  2. Zuul网关跨域问题

    1.跨域就指着协议,域名,端口不一致,出于安全考虑,跨域的资源之间是无法交互的.简单说就是协议不通,域名不通,端口不同都会产生跨域问题 Access-Control-Allow-Origin是HTML ...

  3. 【转帖】Linux上,最常用的一批命令解析(10年精选)

    Linux上,最常用的一批命令解析(10年精选) https://juejin.im/post/5d134fbfe51d4510727c80d1 写的挺好呢 Linux这么多命令,通常会让初学者望而生 ...

  4. GrapeCity Documents for Excel 与 Apache POI 功能对比

    GrapeCity Documents for Excel 与 Apache POI 功能对比 GrapeCity Documents for Excel 是什么? GrapeCity Documen ...

  5. %300为0的个数(牛客第四场)-- number

    题意: 给你一串数,问你如题. 思路: 我不是这样的作法,从后往前,先取00,再算%3==0的个数,往前推的时候有递推关系: #define IOS ios_base::sync_with_stdio ...

  6. PYQT5 pyinstaller 打包工程

    win+R 输入cmd  回车 首先安装 pyinstaller : pip install pyinstaller 安装 pywin32: pip install pywin32 在cmd中输入工程 ...

  7. mysql添加索引造成的影响

    尽管添加索引可以优化SQL语句的性能,但是添加索引的同时也会带来不小的开销.尤其是在有大量的索引的情况下. mysql添加索引造成的影响如下: 1.DML(数据操作语言)影响,在表上添加缩影会直接影响 ...

  8. 01 Mysql数据库初识

    一.数据库概述 1.什么是数据库? 什么是数据库呢? 先来看看百度怎么说的 数据库,简而言之可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据运行新增.截取.更新.删除等操作. 所谓“ ...

  9. HTML 5的革新之一:语义化标签一节元素标签。

    摘至于:<HTML 5的革新——语义化标签(一)> HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即 ...

  10. orcle_day01

    Oracle: 数据库,1,认识数据库 数据库:数据的仓库,保存大量数据的地方,有利于对数据的维护.增删改查很方便. 数据库分类: 层次型数据库:现实世界中很多事物是按层次组织起来的.层次数据模型的提 ...