在讲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. Windows Server 2012 删除IIS之后 重新启动 桌面不出来 只出现一个命令提示框 解决方法

    今天本来准备卸载 再重新安装一下IIS的,然后卸载的时候 可能是不小心 把 .net framework 给卸掉了 .net framework 带着powershell 所以卸掉之后 桌面快捷程序都 ...

  2. 像Linux终端一样使用windows命令行【cmder】

    像Linux终端一样使用windows命令行[cmder] 下载cmder 我下载的是full版,下载之后是个压缩包,解压之后点击cmder.exe即可运行. 需要解决的几个问题 默认的是λ,当然还是 ...

  3. .Net Core 2.0生态(4):Entity Framework Core 2.0 特性介绍和使用指南

    前言 这是.Net Core 2.0生态生态介绍的最后一篇,EF一直是我喜欢的一个ORM框架,随着版本升级EF也发展到EF6.x,Entity Framework Core是一个支持跨平台的全新版本, ...

  4. noip提高组2011 Mayan游戏

    Mayan游戏 描述 Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个7行5列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.**游戏通关 ...

  5. SpringMVC过程中@RequestBody接收Json的问题 总是报415

    在SpringMVC中用@RequestBody接收Json的问题,总是报415,经过一翻查找 前台js的post: var postdata = '{"title":" ...

  6. SSM简明教程:简单的十步教你搭建人生第一个SSM框架[ SSM框架整合教程(Spring+SpringMVC+MyBatis) ]

    SSM_BookSystem SSM框架基础 SSM_BookSystem ---> Hello CRUD 说明:本项目目前包含基础的CRUD 日期:2017-05-01 22:25:37 作者 ...

  7. 以打印日志为荣之logging模块详细使用

    啄木鸟社区里的Pythonic八荣八耻有一条: 以打印日志为荣 , 以单步跟踪为耻; 很多程序都有记录日志的需求,并且日志中包含的信息既有正常的程序访问日志,还可能有错误.警告等信息输出,python ...

  8. 基于.netstandard的权限控制组件

    基于.netstandard的权限控制组件 Intro 由于项目需要,需要在 基于 Asp.net mvc 的 Web 项目框架中做权限的控制,于是才有了这个权限控制组件. 项目基于 .NETStan ...

  9. HTML的基本标签

    整理一下这一周学习的一些知识. 首先是一些基本标签. <!DOCTYPE HTML><html> 文档类型声明: 让浏览器,按照html5的标准对代码进行解释与执行.文档类型声 ...

  10. 近期学习的原生JS知识以及jQuery框架

    [正则表达式]1.正则表达式包括两部分: ① 定义正则表达式的规则 ② 定义正则表达式的模式(i/g/m)2.声明正则表达式: ① 字面声明 : var reg = /表达式规则/表达式模式 ② 使用 ...