首页 > 其他分享 >理论+实践:从原型链到继承模式,掌握 Object 的精髓(一)

理论+实践:从原型链到继承模式,掌握 Object 的精髓(一)

时间:2023-06-16 14:33:27浏览次数:56  
标签:... myObject false 链到 精髓 Object 对象 属性

前言

系列首发于公众号『前端进阶圈』 ,若不想错过更多精彩内容,请“星标”一下,敬请关注公众号最新消息。

理论+实践:从原型链到继承模式,掌握 Object 的精髓(一)

  • 在之前的文章中,我们介绍了函数调用位置的不同造成了 this 绑定对象的不同,但对象到底是什么?为什么我们需要绑定他们呢?

语法

  • 对象一共有两种语法:定义(文字)形式和构造形式。
// 对象的文字语法大概是这样:
var myObj = {
    key: value
    // ...
};

// 构造形式大概是这样:
var myObj = new Object();
myObj.key = value;
  • 构造形式和文字形式生成的对象是一样的,唯一的区别在于,在文字声明中你可以添加多个键值对,但在构造形式中你必须逐个添加属性。

类型

  • JavaScript 一种有6中主要类型。
• string
• number
• boolean
• null
• undefined
• object
  • 其中,简单基本类型(string,boolean,number,null,undefined) 本身不是对象。null 会被当做一种对象类型,只是语言本身的一个bug,即对 null 执行 typeof null 时会返回字符串 object。但实际上,null 本身就是基本类型。
  • 在 JavaScript 中有一种错误的说法:JavaScript 中的万物皆对象。
内置对象
• String
• Number
• Boolean
• Object
• Function
• Array
• Date
• RegExp
• Error
  • 在 JavaScript 中,为什么 typeof null 会返回 object?
  • 因为不同的对象在底层都表示为二进制,在 JavaScript 中二进制前三位都是 0 的话会被判断为 object 类型,null 的二进制表示是全 0,自然前三位也是 0,所以执行 typeof 时会返回 object。

内容

  • 在对象中,我们都知道每个对象都有属性,但存储在对象容器内容的是这些属性的名称,他们就像指针(技术角度来说是引用)一样,指向这些值真正的存储位置。
var myObject = {
    a: 2
};

myObject.a; // 2

myObject["a"]; // 2
  • 上述方式中,使用 . 操作符被称为属性访问, [] 操作符被称为键访问。
属性描述符
  • 在 ES5 之前,JS 没有提供给检测属性特性的方法,比如判断属性是否只读。
var myObject = {
    a:2
};

Object.getOwnPropertyDescriptor( myObject, "a" );
// {
//    value: 2,
//    writable: true, 是否可写
//    enumerable: true, 是否可枚举
//    configurable: true 是否可配置
// }
  • 需要注意的是,即便 configurable: false,但我们还是可以把 writable 的状态从 true 改为 false,但是无法由 false 改为 true。除了无法修改,configurable: false 这个属性还会禁止删除这个属性。
var myObject = {
    a:2
};

myObject.a; // 2

delete myObject.a;
myObject.a; // undefined

Object.defineProperty( myObject, "a", {
    value: 2,
    writable: true,
    configurable: false,
    enumerable: true
} );

myObject.a; // 2
delete myObject.a;
myObject.a; // 2
不变性
  1. 对象常量:结合 writable: false 和 configurable: false 即可创建一个真正的常量属性。(不可修改,重定义或删除)
var myObject = {};

Object.defineProperty( myObject, "FAVORITE_NUMBER", {
    value: 42,
    writable: false,
    configurable: false
} );
  1. 禁止扩展: 若想禁止一个对象添加新属性并且保留已有属性,可使用 Object.preventExtensions(...)``
  • 非严格模式下,创建属性 b 会静默失败。在严格模式下,将会抛出 TypeError 错误。
var myObject = {
    a:2
};

Object.preventExtensions( myObject );

myObject.b = 3;
myObject.b; // undefined
  1. 密封:Object.seal(..) 会创建一个“密封”的对象,这个方法实际上会在一个现有对象上调用。Object.preventExtensions(..) 会把所有现有属性标记为 configurable:false。
  • 故密封之后不仅不能添加新属性,也不能重新配置或删除现有属性(虽然可修改属性的值)。`
  1. 冻结:Object.freeze(..) 会创建一个冻结对象,这个方法实际上会在一个现有对象上调用Object.seal(..) 并把所有“数据访问”属性标记为 writable:false,这样就无法修改它们的值。
存在性
  • 在属性中属性返回可能是 undefined。但有可能属性中有可能储存的就是 undefined, 也有可能是因为属性不存在就返回 undefined。那如何区分呢?
  • 可在不访问属性值的情况下判断对象中是否存在这个属性:
var myObject = {
    a:2
};

("a" in myObject); // true
("b" in myObject); // false

myObject.hasOwnProperty( "a" ); // true
myObject.hasOwnProperty( "b" ); // false
  • in 操作符会检查属性是否在对象及其[[prototype]] 原型链中。hasOwnProperty() 只会检查属性是否在某个对象中,不会检查 [[prototype]] 原型链。
  • 看起来 in 操作符可以检查容器内是否有某个值,但是它实际上检查的是某个属性名是否存在。对于数组来说这个区别非常重要,4 in [2, 4, 6] 的结果并不是你期待的 True,因为 [2, 4, 6] 这个数组中包含的属性名是 0、1、2,没有 4。
  • propertyIsEnumerable(...) 会检查给定的属性名是否存在于对象中,而不是原型链中,并且满足 enumerable: true;
  • Object.keys(...) 会返回一个数组,包含所有可枚举属性,Object.getOwnPropertyNames(...)会返回一个数组,包含所有属性,无论他们是否可枚举。
  • in 与 hasOwnProperty(...) 的区别在于是否查找 [[prototype]] 原型链,而 Object.keys(...)、Object.getOwnPropertyNames(...)、propertyIsEnumerable(...)、hasOwnProperty() 都只会查找对象中是否直接包含某个属性。

小结

对象一共有两种语法:`定义(文字)形式和构造形式。`
// 对象的文字语法大概是这样:

var myObj = {
    key: value
    // ...
};

// 构造形式大概是这样:

var myObj = new Object();
myObj.key = value;
  • 构造形式和文字形式生成的对象是一样的,唯一的区别在于,在文字声明中你可以添加多个键值对,但在构造形式中你必须逐个添加属性。
  1. 在 JavaScript 中,为什么 typeof null 会返回 object? - 因为不同的对象在底层都表示为二进制,在 JavaScript 中二进制前三位都是 0 的话会被判断为 object 类型,null 的二进制表示是全 0,自然前三位也是 0,所以执行 typeof 时会返回 object。
  2. 对象中属性访问的方式:
var myObject = {
    a: 2
};

myObject.a; // 2

myObject["a"]; // 2
  • 上述方式中,使用 . 操作符被称为属性访问, [] 操作符被称为键访问。
  1. 禁止扩展: 若想禁止一个对象添加新属性并且保留已有属性,可使用 Object.preventExtensions(...)``
  • 非严格模式下,创建属性 b 会静默失败。在严格模式下,将会抛出 TypeError 错误。
  1. 密封:Object.seal(..) 会创建一个“密封”的对象,这个方法实际上会在一个现有对象上调用。Object.preventExtensions(..) 并把所有现有属性标记为 configurable:false。
  2. 冻结:Object.freeze(..) 会创建一个冻结对象,这个方法实际上会在一个现有对象上调用Object.seal(..) 并把所有“数据访问”属性标记为 writable:false,这样就无法修改它们的值。
  3. in 操作符会检查属性是否在对象及其[[prototype]] 原型链中。hasOwnProperty() 只会检查属性是否在某个对象中,不会检查 [[prototype]] 原型链。
  4. propertyIsEnumerable(...) 会检查给定的属性名是否存在于对象中,而不是原型链中,并且满足 enumerable: true;
  5. Object.keys(...) 会返回一个数组,包含所有可枚举属性,Object.getOwnPropertyNames(...)会返回一个数组,包含所有属性,无论他们是否可枚举。
  6. in 与 hasOwnProperty(...) 的区别在于是否查找 [[prototype]] 原型链,而 Object.keys(...)、Object.getOwnPropertyNames(...)、propertyIsEnumerable(...)、hasOwnProperty() 都只会查找对象中是否直接包含某个属性。

特殊字符描述:

  1. 问题标注 Q:(question)
  2. 答案标注 R:(result)
  3. 注意事项标准:A:(attention matters)
  4. 详情描述标注:D:(detail info)
  5. 总结标注:S:(summary)
  6. 分析标注:Ana:(analysis)
  7. 提示标注:T:(tips)

最后:

  • 欢迎关注 『前端进阶圈』 公众号 ,一起探索学习前端技术......

标签:...,myObject,false,链到,精髓,Object,对象,属性
From: https://blog.51cto.com/u_14399386/6499498

相关文章

  • suse12操作系统普通用户报错error while loading shared libraries: libcap.so.2: can
    1、故障描述linux主机普通用户执行ping命令报错ping:errorwhileloadingsharedlibraries:libcap.so.2:cannotopensharedobjectfile:permissiondenied2、故障原因 超级用户修改了根目录权限为655 3、解决方案chmod755/ ......
  • Jackson2ObjectMapperBuilderCustomizer
    //序列化时的命名策略——驼峰命名法builder.propertyNamingStrategy(PropertyNamingStrategy.LOWER_CAMEL_CASE);配置作用  ......
  • JObject 遍历
    varrespData="";varjobj=JsonConvert.DeserializeObject<JObject>(respData);staticprivateList<Dictionary<string,string>>InitProductResponsed(JObjectjobj){varrespon......
  • [从jQuery看JavaScript]-数据类型和对象(Type and Object)(一)
    jQuery片段:1.var2.//Willspeedupreferencestowindow,andallowsmungingitsname.3.window=this,4.//Willspeedupreferencestoundefined,andallowsmungingitsname.5.undefined,6.//MapoverjQueryincas......
  • sys.sysobjects (Transact-SQL)的详解
    原文:https://www.cnblogs.com/studydo/archive/2012/05/25/2518554.html在数据库中创建的每个对象(例如约束、默认值、日志、规则以及存储过程)都对应一行。列名数据类型说明namesysname对象名idint对象标识号xtypechar(2)对象类型。 可......
  • JavaScript中数组(Array)与对象(Object)中的检索方式
    这里只是要说明一点,数组(Array)和对象(Object)都可以用[...]的方式来进行检索[...]中包含的需要是一个表达式,这个表达式的值最终会以字符串的形式被使用因为不论是数组(Array)还是对象(Object),他们都是以键值对的形式存储内容的,而所有的键的数据类型都是字符串(Array好像不是,但是先这样......
  • Python: json object_hook object_paire_hook
      data='[{"foo":"bar","foo":"baz","b":99}]'json.loads(data,object_hook=print)json.loads(data,object_pairs_hook=print)  ......
  • Unity3D:Pick and select GameObjects
    推荐:将NSDT场景编辑器加入你的3D工具链3D工具集:NSDT简石数字孪生PickandselectGameObjects可以在Scene视图中或从Hierarchy窗口中选择一个游戏对象。也可以一次选择多个游戏对象。Unity会在Scene视图中突出显示选择的游戏对象及其子项。默认情况下,选择轮廓颜色为橙......
  • Object源码阅读
    Object源码阅读native:本地栈方法,使用C语言中实现的方法。packagejava.lang;publicclassObject{ //注册本地方法privatestaticnativevoidregisterNatives();static{registerNatives();}//返回Object对象的classpublicfinalna......
  • objectARX 插入ole图片简单示意
    代码 //获取BMP文件的数据 HBITMAPhBmp=(HBITMAP)LoadImage(NULL,_T("d:\\123.bmp"),IMAGE_BITMAP,0,0,LR_LOADFROMFILE); if(hBmp==NULL){ acutPrintf(_T("FailedtoloadBMPfile\n")); return; } //打开剪贴板 if(!OpenClipb......