JS中Object对象的原型概念基础


Posted in Javascript onJanuary 29, 2018

对象概念

在 javascript 中, 一切引用类型均为对象。 如 function Foo () {} 中,Foo本身就是一个对象的引用。

创建对象方式 字面量方式 new 构造函数函数声明 Object.create

字面量对象

javascript语言级别快速创建对象的实例

var obj = {foo: 'foo', bar: 'bar'}; // Object对象字面量
var obj2 = [obj, 'foo', 'bar']; // Array数组字面量
var obj3 = /^[a-zA-Z0-9]$/; // RegExp正则字面量
var obj4 = function(){}; // Function函数字面量

new 构造函数

通过内置对象的构造函数,或者自定义的函数。 使用 new 操作符,创建一个对象,并且执行构造函数方法。

var obj = new Object();
var obj2 = new Array(1000);
var obj3 = new RegExp('^[a-zA-Z0-9]$');
var obj4 = new Function('a', 'b', 'return a + b;');

函数声明

函数声明创造的对象. 函数属于特殊的对象.

function Foo() {}
Foo instanceof Object;
Foo instanceof Function;

Object.create

传入一个对象作为返回对象的原型,创建一个新对象, 并将新对象的原型指向传入的对象中。

var foo = {
 'foo': 'foo',
 'bar': 'bar'
};
var o = Object.create(foo); // o.__proto__ = foo
console.log(o.foo); // o.__proto__.foo

使用Object.create(null) 可以返回一个字典型对象.

var o = Object.create(null);
o instanceof Object; // return false;
o.toString(); // Uncaught TypeError

对象原型

每一个对象都有一个内置的 __proto__ 属性指向构造它的函数prototype属性. 而构造函数的

prototype.constructor 则指向构造函数本生。一个对象的属性的寻找过程由以下几个部分组成:

寻找对象属性的数据描述符(writable, value)或存取描述符(getter, setter),如果查询到了,则返回 对应的值。如果查询不到,则进入第2步骤。寻找对象属性的值是否有被显示定义 (可以通过 Object.getOwnPropertyNames)检测,如果对象属性定义了,则返回定义的值。 如果没有,则进入第3步骤。寻找对象的隐藏原型__proto__对象的属性,规则同1,2步骤。如果还未找到,则重复第3步骤, 直到__proto__ 为null 为止。

具体案例如下图所示:

JS中Object对象的原型概念基础

检测对象原型

测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性

instanceof Object.prototype.isPrototypeOf

instanceof

运算符,语言级别的检测对象的原型链是否包含构造函数的原型

function Foo () {}
Foo instanceof Function; // return true
Foo instanceof Object; // return true

模拟instanceof查找对象的原型链的构造函数是否包含传入的构造函数, __proto__ 在一些特定的浏览器有暴露给用户

function Bar () {}
function isInstanceof (obj, Constructor) {
 if (obj === null) {
 return false;
 }
 // 忽略 string, number, boolean, null, undefined 类型干扰
 if (!~['object', 'function'].indexOf(typeof obj)) {
 return false;
 }

 var prototype = obj.__proto__;
 while(prototype) {
 if (prototype.constructor === Constructor) {
  return true;
 }
 prototype = prototype.__proto__;
 }
 return false;
}
isInstanceof(Bar, Function);
isInstanceof(Bar, Object);

isPrototypeOf

构造函数的原型对象自带的函数属性, 用于检测目标对象的原型链中是否存在构造函数的原型对象。

function Baz () {}
var baz = new Baz();
Baz.prototype.isPrototypeOf(baz);
Function.prototype.isPrototypeOf(baz);
Object.prototype.isPrototypeOf(baz);

获取对象原型 Object.getPrototypeOf __proto__

var o = {};
var prototype = Object.getPrototypeOf(o);
console.log(prototype === Object.prototype); // return true
// 部分浏览器有效
var o2 = {};
console.log(o2.__proto__ === Object.prototype); // return true

设置对象原型 Object.create Object.setPrototypeOf

Object.create

返回一个对象,并设置它的原型

function Foo () {}
 function Bar () {}
 Foo.prototype.foo = 'foo';
 Bar.prototype = Object.create(Foo.prototype); 
 Bar.prototype.constructor = Bar; // 修正原型链的constructor
 var o = new Bar();
 console.log(o.foo); // return foo;
 console.log(o instanceof Bar); // return true

Object.setPrototypeOf

直接设置对象的隐式原型__proto__

function Foo () {}
 Foo.prototype.name = 'foo';
 var o = Object.create(null);
 Object.setPrototypeOf(o, Foo.prototype);
 console.log(o.name); // return foo

小结

对象具有许多考验开发者的一些知识点。能够完全理解并整理出来是不容易的。后续我会针对对象的继承做个详细的介绍。感谢你对三水点靠木的支持。

Javascript 相关文章推荐
豆瓣网的jquery代码实例
Jun 15 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
一文了解Vue中的nextTick
May 06 Javascript
javascript实现留言板功能
Feb 08 Javascript
vue.js实现只弹一次弹框
Jan 29 #Javascript
javascript trie前缀树的示例
Jan 29 #Javascript
Vue官网todoMVC示例代码
Jan 29 #Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 #jQuery
Angular2 父子组件通信方式的示例
Jan 29 #Javascript
jQuery代码优化方法总结
Jan 29 #jQuery
javascript代码优化的8点总结
Jan 29 #Javascript
You might like
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
Vue.js用法详解
2017/11/13 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
python如何实现复制目录到指定目录
2020/02/13 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
经贸韩语专业大学生职业规划
2014/02/14 职场文书
外贸专业求职信
2014/03/09 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
大学生自荐书范文
2015/03/05 职场文书
亮剑精神观后感
2015/06/05 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB