JavaScript基础知识巩固——对象篇

我就是我 2021-12-04 08:55 397阅读 0赞

一次面试，发现自己JavaScript对象知识这一块掌握的不好，一些知识点欠缺，所以特定总结一下关于JavaScript对象的相关知识。

在JavaScript中几乎“所有的事物”都是对象，  除了原始值， 都是对象。

## 一、对象的定义： ##

### JavaScript的原始值 ###

原始值指的是没有属性或方法的值，原始数据类型指的是拥有原始值的数据。

定义了5种原始数据类型：  1. string     2.  number     3. boolean    4.  null    5.  undefined

对象是包含变量的变量

JavaScript 变量能够包含单个的值，实例：

var test = "Bob Test";

对象也是变量， 且能够包含很多的值， 值按照**名称：值**对的形式编写，例：

var test = {firstName: "Bob", lastName: "Tom", age: 20}

JavaScript 对象是**命名值**的集合，JavaScript对象中的命名值被称为**属性**。

以名称值对书写的对象类似于：  C中的哈希表 和 Java中的哈希映射等；

### 对象方法 ###

方法是可以在对象上执行的动作， 对象属性可以是原始值、其他对象以及函数；

对象方法是包含函数定义的对象属性,  JavaScript对象是被称为属性和方法的命名值的容器。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong>属性</strong></td> 
   <td><strong>值</strong></td> 
  </tr> 
  <tr> 
   <td>firstName</td> 
   <td>Bob</td> 
  </tr> 
  <tr> 
   <td>lastName</td> 
   <td>Tom</td> 
  </tr> 
  <tr> 
   <td>age</td> 
   <td>20</td> 
  </tr> 
 </tbody> 
</table>

创建JavaScript对象    有三种方法：

1. 定义和创建单个对象，使用对象文字；

对象文字值的是花括号 ｛｝中的名称：值对

var obj = { firstName: "test1",  lastName: "test2", age: 20 };
    
    var obj = {
        firstName: "test1",
        lastName:  "test2",
        age  :  20
    };

2. 定义和创建单个对象，通过关键词new；

var obj = new Object();
    obj.firstName = "test1";
    obj.lastName = "test2";
    obj.age = 20;

3. 定义对象构建器，然后创建构造类型的对象。

在 ES5中，还可以通过函数 **Object.create() **  来创建对象。

JavaScript对象是容易改变的， 它们通过引用来寻址， 而非值，  比如：

var a = Test;    //不会创建Test的副本, 对a的任何改变都将改变Test，他们是相同的对象。
    
    var obj = {firstName: "test1", age: 20 }
    console.log(obj.age);        //20
    var a = obj;
    a.age = 21;
    a.firstName = "test2"; 
    console.log(obj);        //  {firstName: "test2", age: 21}

## 二、对象的属性： ##

属性指的是与JavaScript对象相关的值，JavaScript对象是无序属性的集合， 属性通常可以被修改、添加和删除，但是某些属性是只读的。

访问对象属性的语法是：

第一种     objectName.property      // obj.age

第二种：   objectName["property"]        //obj["age"]

第三种：    objectName[expression]     //x = "age";  obj[x] ,表达式必须计算为属性名

（1）JavaScript  ** for...in**  语句遍历对象的属性。

for...in      循环中的代码块会为每个属性执行一次，   循环对象的属性：

var obj = {firstName: "Bob", lastName: "Tom", age: 20}
                 for(i in obj){
                       console.log(i);        
                       console.log(obj[i]);
                 }
    //  firstName  Bob    lastName   Tom    age     20

（2）添加新属性， 通过简单的赋值，向已存在的对象添加新属性。（不能使用预留词作为属性名）

var obj = {firstName: "Bob", lastName: "Tom", age: 20}
     obj.size = "big";
     console.log(obj);    //{firstName: "Bob", lastName: "Tom", age: 20, size: "big"}

（3）删除属性， **delete** 关键词从对象中删除属性:

var obj = {firstName: "Bob", lastName: "Tom", age: 20, size: "big"}
      delete obj.lastName;
      console.log(obj);      //{firstName: "Bob", age: 20, size: "big"}

delete 关键词会同时删除属性的值 和 属性本身， 删除之后，属性在被添加回来之前是无法使用的。

delete 操作符 被设计用于对象属性， **它对变量或 函数没有影响**。

delet  操作符 不应被用于预定义的 JavaScript 对象属性，这样做会使得应用程序崩溃。

## 三、对象的方法： ##

JavaScript 方法是能够在对象上执行的操作， JavaScript 方法是包含函数定义的属性。

this  关键词  ，  在JavaScript中，**被称为  this 的事物， 指的是拥有该JavaScript 代码的对象；**

this 的值， 在函数中使用时， 是“拥有”该函数的对象。

实例：

var obj = {
                      firstName: "Bob", 
                      lastName: "Tom", 
                      age: 20, 
                      testName:  function () {        //创建对象方法
                         return this.firstName + " 对象方法的测试 "  + this.lastName;   
                      }
                }
                console.log(obj.testName());   //obj.testName() 访问对象方法

## 四、JavaScript对象访问器（Getter  和 Setter） ##

ES5 （2009年）引入了Getter 和 Setter ，它们允许你定义对象访问器。

使用 getter 和 setter 时，JavaScript 可以确保更好的数据质量；优点：

1. 提供了更简洁的语法                 2. 允许属性和方法的语法相同

3. 可以确保更好的数据质量          4. 有利于后台工作

**Object.defineProperty()**    方法也可以用于添加 Getter 和 Setter。

## 五、对象构造器 ##

创建相同类型的许多对象的 “蓝图”， 创建一种“对象类型”的方法，是使用对象构造器函数。

以下这个函数Obj()   就是对象构造器函数， 通过 new关键词调用构造器函数可以创建相同类型的的对象。

## 六、 对象原型 ##

所有的JavaScript对象都从**原型**继承属性和方法。

你无法为已有的对象构造器添加新属性：

function Obj(first, last, age) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
    }
    var test = new Obj("Marin", "Tom", 19);
    var test2 = new Obj("Stike", "Mary", 20);      
    Obj.play = "swim";
    console.log(test.firstName +  " 测试添加 " + test.play); 
      //输出==》  Marin 测试添加 undefined

如果要向构造器中添加一个新的属性，则必须把它添加到构造器函数中。

function Obj(first, last, age) {
                this.firstName = first;
                this.lastName = last;
                this.age = age;
                this.play = "swim";
                }
                var test = new Obj("Marin", "Tom", 19);
                var test2 = new Obj("Stike", "Mary", 20);      
                Obj.play = "swim";
                console.log(test.firstName +  " 测试添加 " + test.play);
                //输出==》  Marin 测试添加 swim

原型继承： 所有JavaScript 对象都从原型继承属性和方法；

日期对象都继承自Date.prototype，数组对象继承自Array.prototype

**Object.prototype** 位于原型继承链的顶端。

使用prototype 属性， 可以为对象构造器添加新的属性。

function Obj(first, last, age) {
                   this.firstName = first;
                   this.lastName = last;
                   this.age = age;
                }
                var test = new Obj("Marin", "Tom", 19);
                Obj.prototype.play = "sleep";
                console.log(test.play);       //sleep

## 七、操作对象的一些小技巧： ##

（1）动态的去更改对象的key

const testKey = 'test';
    
                let obj = {
                    firstName:  "Mr",
                    lastName: "Bob",
                    age: 20,
                    [testKey]: '测试'   
                }   
                console.log(obj); //{firstName: "Mr", lastName: "Bob", age: 20, test: "测试"}

（2）判断对象的数据类型

//用Object.prototype.toString 配合闭包来实现对象数据类型的判断
                 function Test(type){
                       return function(num){
                          return `[object ${type}]` === Object.prototype.toString.call(num)
                       }
                 }     
                 console.log(Test('Number')(100));

（3）使用 ...  运算符合并对象或数组中的对象

const obj1 = {
                      firstName: 'Tom心累',
                      age:  22
                }
                const obj2 = {
                      firstName:  'Mary',
                      address:  '广东'
                }
                const mergeObj = {...obj1, ...obj2};
                console.log(mergeObj);   //{firstName: "Mary", age: 22, address: "广东"}

（4）检查某对象中是否含有某个属性

var obj3 = {
                    name: 'Jerry',
                    age: 20  
                }
                console.log(obj3.hasOwnProperty('name'));      // true
                console.log('name' in obj3);        //true
                console.log(obj.hasOwnProperty('valueOf'));    //false, 因为valueOf继承自原型链
                console.log('valueOf' in obj);           //true