基于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 动态加载 css 方法总结
Jul 11 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
JavaScript严格模式详解
Nov 18 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
js实现菜单跳转效果
Dec 11 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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
python异步任务队列示例
2014/04/01 Python
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
Python count函数使用方法实例解析
2020/03/23 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
pycharm实现猜数游戏
2020/12/07 Python
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
个人自我鉴定范文
2013/10/04 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
军训个人总结
2015/03/03 职场文书
土建技术员岗位职责
2015/04/11 职场文书
总结会主持词
2015/07/02 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
Python OpenCV 图像平移的实现示例
2021/06/04 Python
MySQL系列之二 多实例配置
2021/07/02 MySQL
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python