基于js中的原型(全面讲解)


Posted in Javascript onSeptember 19, 2017

在讲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世界中最低级的小喽???短厝ㄒ裁挥小?/p>

凡是通过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本身

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

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

基于js中的原型(全面讲解)

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

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

基于js中的原型(全面讲解)

原型链

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

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

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

以上这篇基于js中的原型(全面讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript写的日历类(基于pj)
Dec 28 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
js网页右下角提示框实例
Oct 14 Javascript
javascript实现数独解法
Mar 14 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 #Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 #Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 #Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 #Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 #Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 #Javascript
十个免费的web前端开发工具详细整理
Sep 18 #Javascript
You might like
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
python Django 创建应用过程图示详解
2019/07/29 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
windows下python安装pip方法详解
2020/02/10 Python
python对XML文件的操作实现代码
2020/03/27 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
python中format函数如何使用
2020/06/22 Python
pandas针对excel处理的实现
2021/01/15 Python
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
警校毕业生自我评价
2014/04/06 职场文书
社区活动总结报告
2014/05/05 职场文书
房屋出租委托书格式
2014/09/23 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
Redis命令处理过程源码解析
2022/02/12 Redis