基于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使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
Vue之封装公用变量以及实现方式
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
Smarty模板变量与调节器实例详解
2019/07/20 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
python简单分割文件的方法
2015/07/30 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
python定时关机小脚本
2018/06/20 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python ATM功能实现代码实例
2020/03/19 Python
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
项目建议书格式
2014/03/12 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
思想政治表现评语
2015/01/04 职场文书
《实心球》教学反思
2016/02/23 职场文书
导游词之崇武古城
2019/10/07 职场文书
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL