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 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 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学习之字符串比较和查找
2011/04/17 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Python实现检测文件MD5值的方法示例
2018/04/11 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python机器人运动范围问题的解答
2019/04/29 Python
python实现简单五子棋游戏
2019/06/18 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
解决pip install psycopg2出错问题
2020/07/09 Python
英国足球店:UK Soccer Shop
2017/11/19 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
应届毕业生简历自我评价
2014/01/31 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
未婚证明范本
2015/06/15 职场文书