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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
jquery插件validate验证的小例子
May 08 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
Vue Render函数创建DOM节点代码实例
Jul 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
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
eclipse php wamp配置教程
2016/06/30 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript中"/"运算符常见错误
2010/10/13 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
python实现360的字符显示界面
2014/02/21 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Django 路由控制的实现
2019/07/17 Python
python getpass实现密文实例详解
2019/09/24 Python
python实现计算器功能
2019/10/31 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
计算机科学技术自荐信
2014/06/12 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2015高考寄语集锦
2015/02/27 职场文书
法院个人总结
2015/03/03 职场文书
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技