详解JavaScript的Object对象

原创

Learn-anything.cn

发布于 2021-12-22 17:09:25

5730

发布于 2021-12-22 17:09:25

文章被收录于专栏：learn-anything.cn

一、Object 是什么？

Object 是 JavaScript 的一种数据类型，用于存储各种键值集合和更复杂的实体，几乎所有对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法，虽然大部分属性都会被覆盖（shadowed）或者说被重写了（overridden）。

一个对象就是一系列属性的集合，属性包括名字和值。如果属性值是函数，那么称之为方法。

1、创建新对象

法一：使用对象初始化器创建对象

var myCar = {
  name: "john",
  age: 22
}

法二：使用 new 关键字创建对象

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
var mycar = new Car("Eagle", "Talon TSi", 1993);

法三：使用 Object.create 创建对象

// Animal properties and method encapsulation
var Animal = {
  type: "Invertebrates", // 属性默认值
  displayType : function() {  // 用于显示type属性的方法
    console.log(this.type);
  }
}

// 创建一种新的动物——animal1
var animal1 = Object.create(Animal);
animal1.displayType(); // Output:Invertebrates

2、设置和删除属性

// 3中设置属性的方式
var myCar = new Object();
myCar.make = "Ford";
myCar["model"] = "Mustang";
var propertyName = "other";
myCar[propertyName] = "title";
console.log(myCar);

// 删除属性
delete myCar.make;

3、遍历对象属性

三种方式遍历对象中属性。

var myCar = {
  name:"john",
  age:22
}

// 法一：
function showProps(obj, objName) {
  var result = "";
  for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
        result += objName + "." + i + " = " + obj[i] + "\n";
    }
  }
  return result;
}
console.log(showProps(myCar, "myCar")); 

// 法二
console.log(Object.keys(myCar));
// 法三
console.log(Object.getOwnPropertyNames(myCar));

4、定义方法

用函数作为对象的属性值，称之为方法。set、get等更多内容，看这里！

var myObj = {
  myMethod: function(params) {
    // ...do something
  }

  // 或者 这样写也可以

  myOtherMethod(params) {
    // ...do something else
  }
};

5、对象比较

两个对象实例永远不会相等，即时他们的属性完全相同。

// 两个变量, 两个具有同样的属性、但不相同的对象
var fruit = {name: "apple"};
var fruitbear = {name: "apple"};
fruit == fruitbear // return false
fruit === fruitbear // return false

// 两个变量, 同一个对象
var fruit = {name: "apple"};
var fruitbear = fruit;  
fruit == fruitbear // return true
fruit === fruitbear // return true

二、Object 常用方法

1、Object.defineProperty

功能：增加或修改对象的属性值。更多内容，看这里！

// 1、语法
Object.defineProperty(obj, prop, descriptor)

// 2、使用方法
const object1 = {};

Object.defineProperty(object1, 'property1', {
value: 42,
writable: false
});

object1.property1 = 77;
// throws an error in strict mode

console.log(object1.property1);
// expected output: 42

2、Object.assign

功能：通过复制一个或多个对象来创建一个新的对象。。更多内容，看这里！

// 语法
Object.assign(target, ...sources)

// 1、复制一个对象
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

// 2、合并相同属性
const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

// 3、继承和非可枚举属性不能拷贝
const obj = Object.create({foo: 1}, { // foo 是个继承属性。
    bar: {
        value: 2  // bar 是个不可枚举属性。
    },
    baz: {
        value: 3,
        enumerable: true  // baz 是个自身可枚举属性。
    }
});
const copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }

3、Object.create

功能：使用指定的对象和属性创建一个新对象。更多内容，看这里！

const person = {
isHuman: false,
printIntroduction: function() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
}
};

const me = Object.create(person);

me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

三、prototype (继承)

JavaScript 的每个实例对象都有一个指向上一层对象的私有属性（称之为 __proto__），上一层对象又指向再上一层对象，就这样层层向上直至 __proto__ 属性为 null ，最后这个对象就是 Object 。

这种通过 __proto__ 属性来链接对象的方法，称之为 原型链 。继承特性也是基于它。详细内容，看这里！

四、参考文档

详解JavaScript的Object对象

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

登录后参与评论

0 条评论

热度