详解JavaScript的Object对象

编程之家收集整理的这篇文章主要介绍了详解JavaScript的Object对象编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
一、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对象全部内容。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给好友。

原文地址:https://cloud.tencent.com/developer/article/1923203

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

JavaScript相关文章

编写程序是为了让我们更高效的处理问题,但在生活中我们常常遇到一些重复性的动作,也就是当我们希望一遍又一遍的执行多次代码,但是每一次执行代码的值有不同的时候我们就可以使用循环语句来解决问题。
JavaScript1. Promise 的理解Promise 是一种为了避免回调地狱的异步解决方案 2. Promise 是一种状态机: pending(进行中)、fulfilled(已成功)和rejected(已失败) 只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。回调地狱回调函数中嵌套回调函数的情况就叫做回调地狱。回调地狱就是为是实现代码顺序执行而出现的一种操作,它会造成我们的代码可读性非常差,后期不好维护。一、Promise是什么?Promise是最早
在谈sort之前,我们先了解一下原地算法,什么事原地算法呢?所谓**原地算法**就是说基于原有的数据结构进行一定的操作修改,而不借助额外的空间。使用原地算法时,其内存干净,空间复杂度是O(1),可以减少没必要的内存,避免造成内存浪费和冗余。当然,减小内存损耗会带来算法复杂度和时间消耗的增加,所以是一个Tradeoff。**Tradeoff** 是一种针对目标选择有效的路径的思维方式,需要对做的事情权衡利弊,选择最佳方式处理问题。
牛客是可以伴随一生的编程软件(完全免费),从学校到社会工作,时时刻刻你都可以用到,
官网介绍说:Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。的方式是经过优化的,会加快修改速度,对程序的性能有很大的好处。虽然可以直接修改,但是出于代码结构来说, 全局的状态管理还是不要直接在各个组件处随意修改状态,应放于。方法的第二个参数:配置对象,放置state,getters,actions。属性: 修改state全局状态数据,可以是异步也可以是同步。方法的第一个参数:容器的名字,名字必须唯一,不能重复。属性: 用来监视或者说是计算状态的变化的,有缓存的功能。
通过useImperativeHandle的Hook,将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起;所以在父组件中,使用 inputRef.current时,实际上使用的是参数二返回的对象;但是,事实上在上面的案例中,我们只是希望父组件可以操作的focus,其他并不希望它随意操作。那么我们就可以在子组件的内部, 在重新定义一个ref对象, 再将想要暴露的操作暴露出去即可。子组件拿到父组件中创建的ref,绑定到自己的某一个元素中;等等, 我们希望可以限制它的操作;
JS逆向 Frida - 夜神模拟器安装配置 基本使用
Effect Hook 可以让你来完成一些类似于class中生命周期的功能;事实上,类似于网络请求、手动更新DOM、一些事件的监听,都是React更新DOM的一些副作用(Side Effects);所以对于完成这些功能的Hook被称之为 Effect Hook;