JavaScript知识点总结(十一)之js中的Object类详解


Posted in Javascript onMay 31, 2016

JavaScript中的Object对象,是JS中所有对象的基类,也就是说JS中的所有对象都是由Object对象衍生的。Object对象主要用于将任意数据封装成对象形式。

一、Object类介绍

Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数。

二、Object类主要属性

1.constructor:对象的构造函数。

2.prototype:获得类的prototype对象,static性质。

三、Object类主要方法

1.hasOwnProperty(propertyName)

判断对象是否有某个特定的属性。必须用字符串指定该属性,例如,obj.hasOwnProperty("name"),返回布尔值。此方法无法检查该对象的原型链中是否具有该属性;该属性必须是对象本身的一个成员。

var str ="";
alert("str.hasOwnProperty(\"split\")的结果是:"+str.hasOwnProperty("split")); //return false
alert("String.prototype.hasOwnProperty(\"split\")的结果是:"+String.prototype.hasOwnProperty("split"));//return true

运行结果:

JavaScript知识点总结(十一)之js中的Object类详解

hasOwnProperty的用法不仅仅在此,在Jquery中在编写插件中,少不了的一步,就是初始化参数,其中一个很重要的方法就是$.extend();他的原理就是应用了hasOwnProperty()方法;利用for in 循环遍历对象成员中,有没有相同名称的对象成员,有的话就用这个新的对象成员替换掉旧的,通过这种方式,我们就可以通过修改方法中的参数变化,从而控制程序的流程,而对于那些没有改变的部分,仍使用默认值进行控制,我们自己也可以简单的模拟一下这个extend函数,如下

function extend(target,source){//target 旧的 source新的
for (var i in source){
if(target.hasOwnProperty(i)){
target[i]=source[i];
}
}
return target;
}
var a={"first":,"second":"lyl","third":"bob"};
var b={"third":"leo"};
extend(a,b);
for(var i in a){
alert(a[i]);//原本是bob,现在变成leo了
}

  2.isPrototypeOf(object)

判断该对象是否为另一个对象的原型。

obj1.isPrototypeOf(obj2);

obj1是 一个对象的实例;obj2是另一个将要检查其原型链的对象。原型链可以用来在同一个对象类型的不同实例之间共享功能。如果obj2的原型链中包含 obj1,那么isPrototypeOf 方法返回 true。如果obj2不是一个对象或者obj1没有出现在obj2中的原型链中,isPrototypeOf 方法将返回 false。

<script type="text/javascript">
function foo(){
this.name = 'foo';
}
function bar(){
}
bar.prototype = new foo();
var goo = new bar();
alert(goo.name); //foo
alert(bar.prototype.isPrototypeOf(goo));//true,在bar的原型链中有当前对象goo,则isPrototypeOf方法返回true
</script>

3.propertyIsEnumerable(propertyName)

通过这个方法我们可以检测出这个对象成员是否是可遍历的,如果是可遍历出来的,证明这个对象就是可以利用for in 循环进行遍历的,

格式如下:obj.propertyIsEnumerable(propertyName)

如果 propertyName存在于 obj中且可以使用一个 For…In 循环穷举出来,那么 propertyIsEnumerable 属性返回 true。如果 object 不具有所指定的属性或者所指定的属性不是可列举的,那么 propertyIsEnumerable 属性返回 false。典型地,预定义的属性不是可列举的,而用户定义的属性总是可列举的。

4.toString():返回对象对应的字符串

5.valueOf():返回对象对应的原始类型

以上5个方法都是Object.prototype上定义的,ECMAScript 中的所有对象都由Object继承而来,所以在ECMAScript上的所有对象都具有以几个方法

测试代码1:

var p = new Object(); //通过Object直接创建对象
//为p对象动态添加属性
p.Age=;
p.Name="孤傲苍狼";
//扩展Object类,为Object类添加一个Show方法
Object.prototype.Show=function(){
alert(this.Age+"\t"+this.Name);
}
alert(p.Age);
p.Show();
document.write("<pre>");
document.writeln("p.constructor:"+p.constructor);//得到对象的构造函数
document.writeln("Object.prototype:"+Object.prototype);//得到prototype对象,prototype是静态属性,只能通过"类名.prototype"去访问
document.writeln("p.isPrototypeOf(p):"+p.isPrototypeOf(p));
document.writeln("p.hasOwnProperty(\"Age\"):"+p.hasOwnProperty("Age"));
document.writeln("p.propertyIsEnumerable(\"Age\"):"+p.propertyIsEnumerable("Age"));
document.writeln("p.toString():"+p.toString());
document.writeln("p.valueOf():"+p.valueOf());
document.write("</pre>");

运行结果:

JavaScript知识点总结(十一)之js中的Object类详解

测试代码2:

var Car = function(){};
Car.prototype.hello = function(){
alert("hello car");
};
var car = new Car();
car.f = function() {
alert("自定义方法");
}
document.write("<pre>");
document.writeln("car.hasOwnProperty(\"f\")的结果是:"+car.hasOwnProperty("f"));//ture,car对象有f方法
document.writeln("car.propertyIsEnumerable(\"f\")的结果是:"+car.propertyIsEnumerable("f"));//ture,car对象有f方法,f方法是可以被枚举的
document.writeln("car.hasOwnProperty(\"hello\")"+car.hasOwnProperty("hello")); // false,因为car本身没有hello方法
document.writeln("car.propertyIsEnumerable(\"hello\")的结果是:"+car.propertyIsEnumerable("hello")); // false,没有这个方法当然不能枚举
document.writeln("car.constructor.prototype.hasOwnProperty(\"hello\")的结果是:"+car.constructor.prototype.hasOwnProperty("hello"));// true,car的类Car的原型有hello方法
document.writeln("car.constructor.prototype.propertyIsEnumerable(\"hello\")的结果是:"+car.constructor.prototype.propertyIsEnumerable("hello"));// true, car的类的Car的原型hello方法是可以被枚举的
document.writeln("Car.prototype.hasOwnProperty(\"hello\")的结果是:"+Car.prototype.hasOwnProperty("hello"));// true,car的类Car的原型有hello方法
document.writeln("Car.prototype.propertyIsEnumerable(\"hello\")的结果是:"+Car.prototype.propertyIsEnumerable("hello"));
document.write("</pre>");

运行结果:

JavaScript知识点总结(十一)之js中的Object类详解

以上所述是小编给大家介绍的JavaScript知识点总结(十一)之js中的Object类详解,希望对大家有所帮助

Javascript 相关文章推荐
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
vue组件间通信解析
Mar 01 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
基于jQuery实现点击列表加载更多效果
May 31 #Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 #Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 #Javascript
Bootstrap表单布局样式代码
May 31 #Javascript
jQuery使用经验小技巧(推荐)
May 31 #Javascript
JavaScript知识点总结(十)之this关键字
May 31 #Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 #Javascript
You might like
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
python调用API实现智能回复机器人
2018/04/10 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
Django REST framwork的权限验证实例
2020/04/02 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
为什么使用接口?
2014/08/13 面试题
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
物业总经理岗位职责
2014/02/28 职场文书
民生工程实施方案
2014/03/22 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
四年级小学生评语
2014/12/26 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
MySQL时区造成时差问题
2022/04/13 MySQL