基于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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
JQuery 学习笔记 选择器之五
Jul 23 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 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
php中的数组操作函数整理
2008/08/18 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python里隐藏的“禅”
2014/06/16 Python
详解Python中for循环是如何工作的
2017/06/30 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
Python列表list操作相关知识小结
2020/01/29 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
营销与策划应届生求职信
2013/11/04 职场文书
运动会广播稿80字
2014/01/23 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android
git stash(储藏)的用法总结
2022/06/25 Servers