0

0

JavaScript 对象的用法

巴扎黑

巴扎黑

发布时间:2016-12-06 09:57:49

|

1241人浏览过

|

来源于php中文网

原创

内容简介:javascript是面向对象语言,通过原型机制实现继承,通过『闭包』等方式可以实现封装。 本文来探讨javascript对象的特殊之处:原型链、引用、反射、属性遍历等特性。 
一、对象创建 
javascript拥有非常直观的对象创建方式: 
var emptyobject = {}; 
var person = { 
    name: 'harttle', 
    age: 24 
}; 
相当于: 
var xx = new object(); 
xx.name = 'hartle'; 
xx.age = 24; 
二、属性访问 
属性可以通过两种语法访问: 
person.age 
person['age'] 
当属性名不存在时javascript会沿着原型链去查找。 赋值可以更新或创建一个属性,属性可以通过delete person.age来删除。 
对undefined获取属性会引发typeerror,一般通过&&来解决: 
// person.girl === undefined 
person.girl.name;                // typeerror 
person.girl && person.girl.name; // undefined 
三、原型 
javascript的原型继承方式有些繁琐,在es6中提供了object.create方法,原型继承变得更加简单。 
它的实现大致是这样的: 
if (typeof object.create !== 'function') { 
    object.create = function (o) { 
        var f = function () {}; 
        f.prototype = o; 
        return new f(); 
    }; 

var obj = object.create(proto); 
如果被赋值/删除的属性来自于原型,javascript也会为当前对象创建/删除对应属性, 原型的属性不会受到影响。 
网传person.age = undefined来删除属性的方式,其实相当于创建一个属性,其值为undefined。而delete person.age则会真正删除属性,就像从未声明过那个属性一样。 
例如: 
var prot = { name: 'harttle' }; 
// 以 prot 为原型创建 p 
var p = object.create(prot); 
delete p.name;          // p.name === 'harttle', 原型链的对象属性不受影响 
p.name = undefined;     // p.name === undefined 
delete p.name;          // p.name === 'harttle',获取了原型的属性 
undefined属于基本数据类型undefined,该类型的取值只有一种,即undefined。 
四、对象引用 
javascript中对象是通过引用传递的,它们不会被拷贝: 
var a = b = {}; 
a.name = 'harttle'; 
b.name === 'harttle'    // true 
通过原型继承时,原型也是作为引用进入原型链的,原型属性不会被拷贝: 
var prot = {girl: {name: 'alice'}}; 
var p1 = object.create(prot); 
var p2 = object.create(prot); 
p1.girl.name = 'fuck';  // p2.girl.name === 'fuck' 
可见原型关系是一种动态关系。 
五、反射 
javascript是一门动态语言,通过typeof可以在运行时获取类型信息: 
typeof p.age         // 'number' 
typeof p.name        // 'string' 
typeof p.tostring    // 'function',来自原型:object.prototype 
typeof p.wing        // 'undefined' 
当然,typeof的能力有限,只能检查基本数据类型。 为了支持面向对象设计,我们需要更复杂的类型判断机制,可以参考 如何检查javascript的类型?一文。 
六、属性遍历 
可以通过for in遍历对象属性(包括原型属性): 
var person = {name: 'harttle', age: 24}; 
for(var prop in person){ 
    console.log(p[prop); 

为了只获取当前对象的属性,可以通过hasownproperty来判断: 
for(var prop in person){ 
    if(person.hasownproperty(prop)){ 
        console.log(p[prop); 
    } 

for in不保证属性的顺序,如果需要保证顺序可以使用array来代替。 还避免了判断来自原型的属性。 
七、避免全局变量 
对全局变量的依赖是javascript的设计缺陷之一。避免使用全局变量有很多方法, 其中最简单的便是为你的项目定义一个全局变量,并且只定义一个全局变量: 
var app = {}; 
app.foo = 'xxx'; 
app.bar = 'xxx'; 
这样代码更容易维护和变更,毕竟app.foo一眼看去就是一个全局变量。 

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
AO3官网入口与中文阅读设置 AO3网页版使用与访问
AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

5

2026.02.02

主流快递单号查询入口 实时物流进度一站式追踪专题
主流快递单号查询入口 实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容,重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题,帮助用户快速获取最新物流状态,提升查件效率与使用体验。

1

2026.02.02

Golang WebAssembly(WASM)开发入门
Golang WebAssembly(WASM)开发入门

本专题系统讲解 Golang 在 WebAssembly(WASM)开发中的实践方法,涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化,以及典型应用场景(如前端计算、跨平台模块)。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

1

2026.02.02

PHP Swoole 高性能服务开发
PHP Swoole 高性能服务开发

本专题聚焦 PHP Swoole 扩展在高性能服务端开发中的应用,系统讲解协程模型、异步IO、TCP/HTTP/WebSocket服务器、进程与任务管理、常驻内存架构设计。通过实战案例,帮助开发者掌握 使用 PHP 构建高并发、低延迟服务端应用的工程化能力。

1

2026.02.02

Java JNI 与本地代码交互实战
Java JNI 与本地代码交互实战

本专题系统讲解 Java 通过 JNI 调用 C/C++ 本地代码的核心机制,涵盖 JNI 基本原理、数据类型映射、内存管理、异常处理、性能优化策略以及典型应用场景(如高性能计算、底层库封装)。通过实战示例,帮助开发者掌握 Java 与本地代码混合开发的完整流程。

1

2026.02.02

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

61

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

52

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

25

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

10

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号