复习js基础篇 - 对象

zlevai
142 阅读4分钟

万物皆可盘，万物皆对象。

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。

在 JavaScript 中，对象是拥有属性和方法的数据。

属性：是和对象相关的值。

方法：能够在对象上执行的动作。

学习目标

  1. 如何创建并使用对象？
  2. 什么是构造器函数？
  3. js中的内置对象及其运用？

如何创建并使用对象？

// 1.对象字面量创建对象
var pig = {
  age: 1,
  weight: '55kg'
}
// 2.通过new运算符创建对象
var obj = new Object(); // new运算符后面跟的是一个函数调用，这个函数被称为构造函数。js中原始类型都包含内置的构造函数，也可以自己定义构造函数。
function Person(name, age){ // 自己定义构造函数。
  this.name = name;
  this.age = age;
}
var obj1 = new Person("ys", 12);

// 3.通过立即执行函数创建对象
var obj = (function(){ return {x:1,y:2};}()); // 在立即执行函数内部一定要有return语句，return出的内容就是待创建的对象。

// 4.Object.create()创建
var obj1 = Object.create({
  name: "ys",
  age: 12
});

// pig 变量为保存该对象
// 对象使用的是大括号{}
// 括号中用逗号分隔着的是组成该对象的元素，熟称属性
// 键值对之间用冒号分隔，例如： key:value
// 一般情况下属性名不加引号，但是在属性名是保留字、属性名包含空格或者其他特殊字符（下划线、数字、下划线以外的字符），属性名以数字开头

访问对象属性

通常两种方式访问对象的属性：

  1. 中括号表示法，pig['age'], 当访问的属性名不确定时，就必须用中括号表示法。
  2. 点号表示法，pig.age

调用对象的方法

对象方法实际是上，只是 一个函数类型属性，因此访问方式和属性完成相同。即用点号表示法或者中括号表示法均可。

修改属性和方法

js是一种动态语言，允许随时对现存对象的属性和方法进行修改，其中包括添加和删除属性。

var hero = {};
typeof hero.age // undefined
hero.age = 2;
hero.weight = "55kg";
hero.sayAge = function(){
  return hero.age; //  这里可以使用 this.age ，当我们引用this值时，实际所引用的就是这个对象或者当前对象。
}
hero.sayAge(); // 2
delete hero.age; // ture
hero.sayAge(); // undefined

什么是构造器函数？

用new关键字来调用的函数，首字母一般大写；

用this来构造它的属性以及方法；

写普通函数时一般习惯用驼峰命名，而构造函数一般首字母大写（约定俗成）以及构造函数是用来新建实例对象。

constructor function 构造器函数的方式来创建对象。

当我们声明了一个构造函数，但又不通过new 来调用它时，代码就会返回 undefined。

function Hero(){
  this.name = "超级英雄";
}
var hero = new Hero(); // 使用new操作符创建对象
hero.name // "超级英雄"

// 使用构造器函数的好处在于，可以在创建对象时接收一些参数。
function Hero(name){
  this.name = name;
  this.occupation = "医生";
  this.whoAreYou = function(){
    return `我的名字是 ${this.name}，我的职业是一名${this.occupation}。 `
  }
}
var h1 = new Hero('zhansan');
var h2= new Hero('lisi');
typeof h1 // object

var h = Hero('wangwu'); // 不使用new 操作符
typeof h // undefined 因为没有使用new操作符，因此不是创建一个新的对象，相当于普通函数的调用，这里h值就是该函数的返回值，而函数的默认返回值就是undefined.
// 这种情况下 this 的引用就是全局对象，当程序的宿主环境是web浏览器时，它提供的全局对象就是window。

2020_06_17_7XThfk

构造器属性

当通过构造器 函数创建对象时，实际上同时也赋予了该对象一种特俗的属性，即构造器属性 construction property。该属性指向用于创建该对象的构造器函数的引用。

function Hero(name){
  this.name = name;
  this.occupation = "医生";
  this.whoAreYou = function(){
    return `我的名字是 ${this.name}，我的职业是一名${this.occupation}。 `
  }
}
var h1 = new Hero('zhansan');
h1.constructor 

var o = {};
o.constructor // ƒ Object() { [native code] }
typeof o.constructor // function

2020_06_17_4jFlmV

2020_06_17_42FNaO

通过 instanceof 操作符可以测试一个对象是不是由某个指定的构造器函数创建的。

function Hero(name){
  this.name = name;
  this.occupation = "医生";
  this.whoAreYou = function(){
    return `我的名字是 ${this.name}，我的职业是一名${this.occupation}。 `
  }
}
var h1 = new Hero('zhansan');
h1 instanceof Hero // true

对象的比较

当且仅当两个引用指向同一个对象时为 true.

如果是不同的对象，即使他们拥有相同的属性和方法，比较操作也会返回false.

var pig = {age:2};
var cat = {age:2};
pig == cat  // false
pig === cat  // false

// 新建一个变量 cat2 ,并将其中一个对象赋值给它。这样 cat2实际上就指向了这个变量
var cat2 = pig;
cat2 == pig // true
cat2 === pig // true
cat2 == cat // false
cat2 === cat // false

内建对象

内建对象大致上可以分为三个组

  • 数据封装类对象
    • Obejct、Array、Boolean、Number、String
  • 工具类对象
    • Math、Date、RegExp
  • 错误类对象

无论是函数还是构造器函数，最后都是对象。

avatar
文章
阅读
粉丝