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中Object和Function的关系的三段简单代码
Jun 27 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
js实现无缝循环滚动
Jun 23 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
JavaScript中的各种宽高属性的实现
May 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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php连接数据库代码应用分析
2011/05/29 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
动态控制Table的js代码
2007/03/07 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
微信小程序实现拖拽功能
2019/09/26 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
应用数学自荐书范文
2013/11/24 职场文书
应急处置方案
2014/06/16 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
银行求职自荐信范文
2015/03/04 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
nginx配置之并发频次限制
2022/04/18 Servers