js的原型
在讲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的原型的更多相关文章
- 前端基本知识(二):JS的原型链的理解
之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...
- js javascript 原型链详解
看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...
- 攻略前端面试官(三):JS的原型和原型链
本文在个人主页同步更新~ 背就完事了 介绍:一些知识点相关的面试题和答案 使用姿势:看答案前先尝试回答,看完后把答案收起来检验成果~ 面试官:什么是构造函数 答:构造函数的本质是一个普通函数,他的特点 ...
- 怎么理解js的原型链继承?
前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...
- 我去!JS的原型是咋回事?
我去!JS的原型是咋回事? 最近写公司的项目,写着写着发现自己的原型的理解还是不够透彻,又去网上查了一番资料,顺便总结一下,在顺便给到的朋友能提供一点帮助.如有遗漏,欢迎交流. 原型是啥?为什么要用原 ...
- 关于JS对象原型prototype与继承,ES6的class和extends · kesheng's personal blog
传统方式:通过function关键字来定义一个对象类型 1234567891011 function People(name) { this.name = name}People.prototype. ...
- 基础1:JS的原型和原型链究竟
JS的原型和原型链究竟是什么? 1. 从JS创建一个对象开始说起: 1.1 工厂模式创建对象 (缺点是无法知道创建出来的对象是一个什么类型的对象) function createPerson(name ...
- 自己对js对原型链的理解
js对象分为2种 函数对象和普通对象 函数对象 比如 function Show(){}var x=function Show2(){}var b=new Function("show3&q ...
- JS中原型链继承
当我们通过构造函数A来实现一项功能的时候,而构造函数B中需要用到构造函数A中的属性或者方法,如果我们对B中的属性或者方法进行重写就会出现冗杂的代码,同时写出来也很是麻烦.而在js中每个函数都有个原型, ...
随机推荐
- 如何在GitHub上生成ssh公钥并用NetBeans克隆项目
一.生成ssh公钥. 1.首先判断本机是否创建了公有密钥: $ ls ~/.ssh 这个命令用于检查是否已经存在 id_rsa.pub 或 id_dsa.pub 文件,如果文件已经存在,下面步骤可省略 ...
- js的dom操作和函数
dom是稳当对象模型,文档指标签文档,对象指文档中每个元素,模型指抽象画的东西. js常用函数 日期时间函数(需要用变量调用):var b = new Date(); //获取当前时间b.getTim ...
- 012.Adding a New Field --【添加一个新字段】
Adding a New Field 添加一个新字段 2016-10-14 3 分钟阅读时长 作者 By Rick Anderson In this section you'll use Entity ...
- (译)package.json详解
原文链接 概述 本文囊括了所有package.json文件中你需要知道的细节.注意package.json必须是纯JSON的,而不仅仅是一个JavaScript对象字面量.该文件描述的很多行为都受np ...
- 转载:细说Cookie
细说Cookie 转载:http://www.cnblogs.com/fish-li/archive/2011/07/03/2096903.html 阅读目录 开始 Cookie 概述 Cookie的 ...
- mint-ui —— navbar和tab-container的区别
navbar的具体实现 <template> <div class="page-navbar"> <div class="page-titl ...
- Python3 TA-Lib
This is a Python wrapper for TA-LIB based on Cython instead of SWIG. From the homepage: TA-Lib is wi ...
- linux下权限问题思考
今天遇到一些关于linux的权限问题,文件的所有者,文件的所属组等问题,文件对于所有者所属组是非常敏感的,同一个脚本所属者所属组不同,得到执行的结果也是差很多的.
- boost::pool 库速记
使用示例 #include <functional> #include <iostream> #include <boost/pool/pool.hpp> #inc ...
- chrome开发工具指南(十三)
模拟传感器:地理定位与加速度计 由于大多数桌面设备都没有 GPS 芯片和加速度计,所以测试它们比较困难.Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降 ...