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 删除cookie失效的解决方法
Nov 12 Javascript
js创建对象的方法汇总
Jan 07 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
取得一定长度的内容,处理中文
2006/12/20 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
JS继承用法实例分析
2015/02/05 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
Python中__init__和__new__的区别详解
2014/07/09 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
python之PyMongo使用总结
2017/05/26 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
优秀教师的感人事迹
2014/02/04 职场文书
黄金酒广告词
2014/03/21 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
银行服务理念口号
2015/12/25 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android