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. rtsp学习----海康RTSP客户端连接深入分析

    转载于:http://blog.csdn.net/zhouyongku/article/details/41546789 海康相机RTSP连接代码分析 最近在做海康相机rtsp连接获取音视频的工作,现 ...

  2. (5.6)mysql高可用系列——MySQL Utilities 管理工具

    关键词:mysql工具集,mysql管理工具,mysql utilities [1]安装mysql utilities cd /download wget https://cdn.mysql.com/ ...

  3. [Bzoj1001][BeiJing2006]狼抓兔子(网络流/对偶图)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1001 看到大佬们都是对偶图过的,写了个最大流水过去了QAQ,网络流的无向图直接建双向边( ...

  4. python_0基础开始_day12

    第十二节 一,生成器 生成器的核心:生成器的本质就是迭代器 迭代器是python自带的 生成器是程序员自己写的一种迭代器 在python中有三种方式来创建生成器: 基于函数编写 推导式方式编写 pyt ...

  5. Postman之前言

    Postman是一款流行的接口api调试/测试工具.几乎可以发送大多数的HTTP请求. 1.依据开发提供的接口文档,对接口进行测试. 2.如果是自己学习,可以网上找一些免费的接口进行学习,或者抓包 - ...

  6. python基本数据类型零碎知识点

                                                                                                        ...

  7. (转载)sublime3安装markdown插件

    原文链接 http://www.jianshu.com/p/335b7d1be39e?utm_source=tuicool&utm_medium=referral 最近升级到了 Sublime ...

  8. sql server if else

    DECLARE IF (@sex = '1')BEGIN PRINT '2'END ELSE BEGIN PRINT(1) END begin... end可以省略 declare @sex int ...

  9. 关于不同retina的布局

    不同retina,显示高度不一样,很显然最细的线条最美 <!DOCTYPE html> <html lang="en"> <head> < ...

  10. avascript中实现垃圾桶的功能

    javascript中实现垃圾桶的功能,就像折垃圾桶在拖动目标上触发事件 (源元素):ondragstart - 用户开始拖动元素时触发ondrag - 元素正在拖动时触发ondragend - 用户 ...