在讲js的原型之前,必须先了解下Object和Function。

Object和Function都作为JS的自带函数,Object继承自己,Funtion继承自己,Object和Function互相是继承对方,也就是说Object和Function都既是函数也是对象。

 console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true

Object 是 Function的实例,而Function是它自己的实例。

console.log(Function.prototype); // ƒ () { [native code] }
console.log(Object.prototype); // Object

普通对象和函数对象

JavaScript中万物皆对象,但对象之间也是有区别的。分为函数对象和普通对象。

函数对象可以创建普通对象,普通对象没法创建函数对象,普通对象JS世界中最低级的小喽啰,啥特权也没有。

凡是通过new Function创建的对象都是函数对象,其他都是普通对象(通常通过Object创建),可以通过typeof来判断。

 function f1(){};
typeof f1 //"function" var o1 = new f1();
typeof o1 //"object" var o2 = {};
typeof o2 //"object"

这边要注意的是下面这两种写法是一样的

function f1(){};   ==   var f1 = new Function();
function f2(a,b){
alert(a+b);
} 等价于 var f2 = new Function(a,b,"alert(a+b)");

prototype、_proto_和construetor(构造函数)

下面两句话也很重要

1、每一个函数对象都有一个prototype属性,但是普通对象是没有的;

  prototype下面又有个construetor,指向这个函数。

2、每个对象都有一个名为_proto_的内部属性,指向它所对应的构造函数的原型对象,原型链基于_proto_;

好了,开始上代码和例子,建一个普通对象,我们可以看到

  1、o的确没有prototype属性

  2、o是Object的实例

  3、o的__proto__指向Object的prototype

  4、Object.prototype.constructor指向Object本身

  还可以继续往下延伸......

1     var o = {};
2 console.log(o.prototype); //undefined
3 console.log(o instanceof Object); //true
4 console.log(o.__proto__ === Object.prototype) //true
5 console.log(Object === Object.prototype.constructor) //true
6 console.log(Object.prototype.constructor) //function Object()
7   console.log(Object.prototype.__proto__); //null

下面来一个函数对象,从下面的例子可以看出

  1、demo是函数对象,f1还是普通对象

  2、f1是Demo的实例

  3、demo的原型prototype的__proto__指向Object的原型prototype,而Object的原型prototyped的__proto__指向null;

     function Demo(){};
var f1 = new Demo();
console.log(f1.prototype); //undefined
console.log(f1 instanceof Demo); //true
console.log(f1.__proto__ === Demo.prototype); //true
console.log(Demo === Demo.prototype.constructor) ;//true
console.log(Demo.prototype.__proto__ === Object.prototype) ;//true
console.log(Object.prototype.__proto__); //null

原型链

javascript中,每个对象都会在内部生成一个proto 属性,当我们访问一个对象属性时,如果这个对象不存在就回去proto 指向的对象里面找,一层一层找下去,这就是javascript原型链的概念。

f1.__proto__    ==>   Demo.prototype   ==>   Demo.prototype.__proto__   ==>   Object.prototype   ==>  Object.prototype.__proto__   ==>   null

JS中所有的东西都是对象,所有的东西都由Object衍生而来, 即所有东西原型链的终点指向null

补上原型链的关系图

js的原型的更多相关文章

  1. 前端基本知识(二):JS的原型链的理解

    之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...

  2. js javascript 原型链详解

    看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...

  3. 攻略前端面试官(三):JS的原型和原型链

    本文在个人主页同步更新~ 背就完事了 介绍:一些知识点相关的面试题和答案 使用姿势:看答案前先尝试回答,看完后把答案收起来检验成果~ 面试官:什么是构造函数 答:构造函数的本质是一个普通函数,他的特点 ...

  4. 怎么理解js的原型链继承?

    前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...

  5. 我去!JS的原型是咋回事?

    我去!JS的原型是咋回事? 最近写公司的项目,写着写着发现自己的原型的理解还是不够透彻,又去网上查了一番资料,顺便总结一下,在顺便给到的朋友能提供一点帮助.如有遗漏,欢迎交流. 原型是啥?为什么要用原 ...

  6. 关于JS对象原型prototype与继承,ES6的class和extends · kesheng's personal blog

    传统方式:通过function关键字来定义一个对象类型 1234567891011 function People(name) { this.name = name}People.prototype. ...

  7. 基础1:JS的原型和原型链究竟

    JS的原型和原型链究竟是什么? 1. 从JS创建一个对象开始说起: 1.1 工厂模式创建对象 (缺点是无法知道创建出来的对象是一个什么类型的对象) function createPerson(name ...

  8. 自己对js对原型链的理解

    js对象分为2种 函数对象和普通对象 函数对象 比如 function Show(){}var x=function Show2(){}var b=new Function("show3&q ...

  9. JS中原型链继承

    当我们通过构造函数A来实现一项功能的时候,而构造函数B中需要用到构造函数A中的属性或者方法,如果我们对B中的属性或者方法进行重写就会出现冗杂的代码,同时写出来也很是麻烦.而在js中每个函数都有个原型, ...

随机推荐

  1. 原创:路由配置实践 两个局域网主机的互连 VM linux

    又开始齐天大圣讲课的时间了 我相信网络是每个运维人员和开发人员必不可少要接触的   今天我们要讲的是在VM虚拟机中 我们三台虚拟机划分两个局域网 实现不同局域网的互联 也就是下面图中的AC通过B主机的 ...

  2. Python 文档 涉及词汇

    Python  is an interpreted, interactive, object-oriented programming language that combines remarkabl ...

  3. 【Centos】修改系统字符集

    centos7: vim /etc/locale.conf LANG=zh_CN.gb2312 其他版本linux: vim /etc/sysconfig/i18n

  4. PyQt4 初试牛刀一

    建立了一个MainWindow,创建最基本的菜单栏.状态栏.工具栏,并重新定义了"X"关闭的默认行为. # -*- coding: utf-8 -*- import sys fro ...

  5. python 爬取天猫美的评论数据

    笔者最近迷上了数据挖掘和机器学习,要做数据分析首先得有数据才行.对于我等平民来说,最廉价的获取数据的方法,应该是用爬虫在网络上爬取数据了.本文记录一下笔者爬取天猫某商品的全过程,淘宝上面的店铺也是类似 ...

  6. Apache与Tomcat的关系和区别 -个人比较

    我们经常在用apache和tomcat等这些服务器,可是总感觉还是不清楚他们之间有什么关系,在用tomcat的时候总出现apache,总感到迷惑,到底谁是主谁是次,因此特意在网上查询了一些这方面的资料 ...

  7. 堆排序—Java

    堆排序: 一棵完全二叉树,如果父节点的值大于等于左右节点的值,则称此完全二叉树为小根堆(小顶堆):如果父节点的值小于等于左右节点的值,则次完全二叉树为大根堆(大顶堆). 堆排序是建立在大顶堆或小顶堆的 ...

  8. redis 介绍和常用命令

    redis 介绍和常用命令 redis简介 Redis 是一款开源的,基于 BSD 许可的,高级键值 (key-value) 缓存 (cache) 和存储 (store) 系统.由于 Redis 的键 ...

  9. Android检查更新下载安装

    检查更新是任何app都会用到功能,任何一个app都不可能第一个版本就能把所有的需求都能实现,通过不断的挖掘需求迭代才能使app变的越来越好.检查更新自动下载安装分以下几个步骤: 请求服务器判断是否有最 ...

  10. 机器学习实战之 第10章 K-Means(K-均值)聚类算法

    第 10 章 K-Means(K-均值)聚类算法 K-Means 算法 聚类是一种无监督的学习, 它将相似的对象归到一个簇中, 将不相似对象归到不同簇中.相似这一概念取决于所选择的相似度计算方法.K- ...