基于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动态调整TextArea高度的代码
Dec 28 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
js实现选项卡效果
Mar 07 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 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中常用编辑器推荐
2007/01/02 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
Python比较两个图片相似度的方法
2015/03/13 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
浅析python中while循环和for循环
2019/11/19 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
党组织公开承诺书
2014/03/29 职场文书
初中班主任评语
2014/04/24 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
财务检查整改报告
2014/11/06 职场文书
离婚协议书格式
2015/01/26 职场文书
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android