《JS原理、方法与实践》- object类型对象

作者 : 开心源码 本文共5597个字,预计阅读时间需要14分钟 发布时间: 2022-05-13 共125人阅读

ES中一共由两种对象,function和object。object类型对象时ES的基础,它主要通过属性使用。

创立object类型对象的三种方式

ES中object类型的对象大致由三种创立方式:直接使用花括号创立、使用function创立、使用Object.create方法创立。

直接使用花括号创立

代码示例:

var obj = {    v: 6,    innerObj: {        v: 7,    },    logV: function() {        console.log(this.v);    }};console.log(obj.v); // 6console.log(obj.innerObj.v); // 7obj.logV(); // 6

使用function创立

对于一个function类型的对象,使用new便是对象,不使用便是函数。一般是对象的话,首字母大写,方法首字母小写。
举例:

function F(){  this.v = 1;}var obj = new F();console.log(obj.v);

使用Object.create方法创立

Object是ES中内置的一个function类型的对象,create是Object对象的一个属性方法,其作用是根据传入的参数创立object类型的对象。create方法的调用语法如下:
Object.create(prototype, [propertiesObject]);
第一个参数prototype是创立的对象所对应的prototype,相当于使用function创立时中的prototype属性对象,创立出来的object对象实例可以直接调用。
第二个参数propertiesObject为属性形容对象,是可选参数,用于形容所创立对象的自身属性。属性形容对象是object类型对象,它里面的属性名会成为所创立对象的属性名,属性值为属性的形容对象。
Object.getOwnPropertyNames(obj):获取obj自己所拥有的属性。
代码示例:

var obj = Object.create(    {        type: 'by create'    },    {        color:{            value: 'red',            enumerable: true,        },        size:{            value: '37',            enumerable: true,        }    });console.log(obj.type); // by createconsole.log(obj.color); // redconsole.log(obj.size); // 37console.log(Object.getOwnPropertyNames(obj)); // ['color', 'size']

Object的prototype属性对象里面都有什么

Object的prototype属性对象在ES5.1和ES2015中都规定了constructor、toString()、toLocaleString()、valueOf()、哈sOwn Property(V)、isPrototypeOf(V)和propertyIsEnumerable(V)7个属性。

  • toString: 可以将对象转换为字符串,不同类型的对象可能会重写自己的toString方法。
  • toLocaleString: 会使用本地化格式来生成字符串,对于时间日期类型和数字类型的用处较大。
  • valueOf: 会返回原始值。例如Date的valueOf就是相应的数字。
  • hasOwnProperty: 判定能否包含指定属性。
  • isPrototypeOf: 判断某个对象能否是另一个对象所对应的prototype对象。
  • propertyIsEnumerable: 判断某个属性能否可以枚举。

标准中所规定的Object的prototype属性对象中的7个属性,但是不同的浏览器还会有自己的扩展。

对象的属性

对象是通过其属性发挥作用的,因而对象的属性是对象的核心。

三种属性类型

命名数据属性(named data properties)、命名访问器属性(named accessor properties)和内部属性(internal properties)。

命名数据属性

命名数据属性是我们平常使用最多的属性,由属性名和属性值组成。
代码示例:

var obj = {    v: 6,    innerObj: {        v: 7,    },    logV: function() {        console.log(this.v);    }};console.log(obj.v); // 6console.log(obj.innerObj.v); // 7obj.logV(); // 6

命名访问器属性(getter/setter)

getter和setter是对应的方法,setter方法用于给属性赋值,而getter方法用于获取属性的值。假如只有getter、setter其中之一,就只能进行单一操作,例如只有getter方法的属性就是只读属性,只有setter方法的属性就是只可以写入的属性。
代码示例:

function log(msg){    console.log(msg);};var car = {    _color: 'red',    _weight: 0,    _age: 0,        // color 可读,可写    get color(){        return this._color;    },        set color(col){        log('color changed');        this._color = col;    },    // weight只读不写    get weight(){        return this._weight;    },    // age 只写不读    set age(age){        this._age = age;    },};car.color='blue';log(car.color); // 'blue'log(car.weight); // 0car.age=10;log(car.age); // undefined

测试结果

内部属性

内部属性是对象的一种特殊的属性。它没有自己的名字,当然也就不可以像前两种属性那样直接访问了。正是由于内部属性没有名字所以前面两种属性才叫命名属性。内部属性使用两对方括号表示。例如, [[Extensible]]表示Extensible内部属性。
内部属性的作用是用来控制对象本身的行为。所有对象共有的内部属性共12个:[[ptototype]]、[[Class]]、[[Extensible]]、[[Get]]、[[GetOwnProperty]]、[[GetProperty]]、[[Put]]、[[CanPut]]、[[HasProperty]]、[[Delete]]、[[DefaultValue]]、[[DefineOwnProperty]]除了这12个之外,不同的对象可能还会有自己的内部属性。
下面简单详情一种内部属性:[[Prototype]]
它就是使用function创立对象时function中的prototype属性。
注意使用Object.getPrototypeOf()方法来获取prototype.
代码示例:

function Car(){}Car.prototype = {color: 'red'};var car = new Car();console.log(typeof car.prototype); // undefinedconsole.log(Object.getPrototypeOf(car)); // 'red'

5种创立属性的方式

1. 使用花括号创立

代码示例:

var obj = {    v: 1, // 直接量属性        // function 对象属性    getV: function() {        return this.v;    },    // 访问器属性(name)    _name: 'object',    get name() {        return this._name;    },    set name(name){        this._name = name;    }};console.log(obj.v); // 1console.log(obj.getV()); // 1console.log(obj.name); // 'object'obj.name = 'objChanged';console.log(obj.name); // 'objChanged'

2. 使用点操作符创立

当使用点操作符给一个对象赋值时,假如对象存在此属性则会修改属性的值,否则会增加相应的属性并赋予相应的值。
代码示例:

var person = {name: 'zzh'};person.name = 'zh';person.age = 18;console.log(person); // { name: 'zh', age: 18 }

3. Object的create方法

第一个参数为创立对象的[[Prototype]]属性,第二个参数为属性形容对象。
代码示例:

var obj = Object.create(    {        type: 'by create'    },    {        color:{            value: 'red',            enumerable: true,        },        size:{            value: '37',            enumerable: true,        }    });console.log(obj.type); // by createconsole.log(obj.color); // redconsole.log(obj.size); // 37console.log(Object.getOwnPropertyNames(obj)); // ['color', 'size']

4.Object的defineProperty、defineProperties方法

使用Object的defineProperty和defineproperties方法给对象增加属性。defineProperty方法可增加单个属性,defineProperties方法可以增加多个属性。
代码示例:

var person = {};Object.defineProperty(person, 'name', {    enumerable: true,    value: 'zzh'});console.log(Object.getOwnPropertyNames(person)); // ['name']console.log(person.name); // zzhObject.defineProperties(person, {    name: {    enumerable: true,    value: 'zzh'    },    age: {    enumerable: true,    value: 18    }});console.log(Object.getOwnPropertyNames(person)); // ['name', 'age']console.log(person.name); // zzhconsole.log(person.age); // 18

5. 通过prototype属性创立

使用function创立的object实例对象可以使用function对象的prototype属性对象中的属性。
代码示例:

function Person(){}var person = new Person();Person.prototype.name = 'zzh';console.log(person.name); // zzh

属性的形容

属性的形容也可以称为属性的特征,相似于对象的内部属性,其主要作用就是形容属性自己的少量特征。

命名数据属性的4个特征
  • [[Value]]: 表示属性的值
  • [[Writable]]: 表示属性值能否可以修改
  • [[Enumerable]]: 表示属性能否可枚举, 若为false则不会被for-in循环遍历到。
  • [[Configurable]]:表示属性能否可以被删除和属性的特性(除[[value]]外)能否可修改。

代码示例:

var person = {};Object.defineProperty(person, 'name', {    enumerable: true,    value: 'zzh',    writable: false, // 不可修改    configurable: true});console.log(Object.getOwnPropertyNames(person)); // ['name']console.log(person.name); // zzhperson.name = 'zh'; // not workconsole.log(person.name); // zzh

命名访问器属性的4个特征
  • [[Get]]:getter方法
  • [[Set]]: setter方法
  • [[Enumerable]]:表示属性能否可枚举, 若为false则不会被for-in循环遍历到。
  • [[Configurable]]:表示属性能否可以被删除和属性的特性(除[[value]]外)能否可修改。
    代码示例:
function log(msg){    console.log(msg);}var person = {_name: '007'};Object.defineProperty(person, 'name', {    get: function(){        log('getting name');        return this._name;    },        set: function(newName){        log('name is changed to ' + newName);        this._name = newName;    }});log(Object.getOwnPropertyDescriptor(person, 'name')); //{ get: [Function: get],set: [Function: set], enumerable: false,configurable: false }console.log(person.name); // 007person.name = 'zzh'; console.log(person.name); // zzh

测试结果

假如觉得文章写得还行,请点个赞。假如想与我进一步交流,可以关注我的公众号或者者加我的微信。

个人微信
公众号_前台微说.jpg

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 《JS原理、方法与实践》- object类型对象

发表回复