在讲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. C# foreach循环较for循环的优势与劣势

    一.foreach循环的优势 C#支持foreach关键字,foreach在处理集合和数组相对于for存在以下几个优势: 1.foreach语句简洁 2.效率比for要高(C#是强类型检查,for循环 ...

  2. 修改(同步)linux时间

    新申请下来的机器的时间现在我们所在的时区不一致,需要同步成东八区 查看当前的时间: date -R; date +%z 修改时区: cp /usr/share/zoneinfo/Asia/Shangh ...

  3. maven使用实战

    maven使用实战 创建项目 在eclipse中创建maven项目之后,会生成.classpath / .setting / .project 三个文件或者文件夹 .classpath 这个文件是用来 ...

  4. multisim&proteus&protel比较

    Multisim有超强板级的模拟/数字电路板的设计工作.它包含了电路原理图的图形输入.电路硬件描述语言输入方式,具有丰富的仿真分析能力.高版本可 以进行单片机等MCU的仿真.Multisim有实际元器 ...

  5. 菜单栏—View(视图)菜单

  6. edittext基本用法总结.md

    光标的有关问题 edittext.setSelection(2); //记住一个不能越界的bug edittext.setCursorVisible(false); //设置光标显示,不能设置光标颜色 ...

  7. ThinkPHP自定义分页模板

    TpPageHelper.php <?php namespace tool; use think\Paginator; class TpPageHelper extends Paginator ...

  8. css关键字unset

    今天遇到了一个css属性 display:unset 以为是新增的display的属性值,查了好久,发现并没有这个属性值, 后来发现了unset是css的关键字,将一个属性的属性值设置为unset,目 ...

  9. JDK和Tomcat部署

    author:JevonWei 版权声明:原创作品 JDK就是Java Development Kit.简单的说JDK是面向开发人员使用的SDK,它提供了Java的开发环境和运行环境.SDK是Soft ...

  10. html5 响应式布局(媒体查询)

    响应式布局        响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.        响应式布局可以为不同终端的用户 ...