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 10 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
原生js实现trigger方法示例代码
May 22 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
php桌面中心(二) 数据库写入
2007/03/11 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
javascript 闭包
2011/09/15 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
基于zepto.js实现手机相册功能
2017/07/11 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
详解tensorflow实现迁移学习实例
2018/02/10 Python
值得收藏的10道python 面试题
2019/04/15 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
2015中学学校工作总结
2015/07/20 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
MySQL 逻辑备份 into outfile
2022/05/15 MySQL