基于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 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
vue登录路由验证的实现
Dec 13 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
Angular2之二级路由详解
Aug 31 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 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过滤XSS攻击的函数
2013/11/12 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
详解Python爬虫的基本写法
2016/01/08 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
拓展培训心得体会
2014/01/04 职场文书
事业单位鉴定材料
2014/05/25 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
Go语言读取txt文档的操作方法
2022/01/22 Golang