ECMAScript1.4 对象 | 简单数据类型与复杂数据类型 | 内置对象

对象

函数和对象的区别：

函数：封装代码

对象：封装属性和方法

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

创建对象的方法：

1，对象字面量{}

// 模拟创建一只dog

var dog = {
    // 属性
    name: 'puppy',
    age: 3,
    type: '牧羊犬',
    color: 'yello',
    // 方法
    bark: function () {
        console.log(this.name + '：汪汪');
    },
    eat: function () {
        console.log(this.name + '：在啃饲料');
    }
}

View Code

2，new Object()

Object是一个构造函数，首字母大写，不是普通函数。

用new的方式来调用构造函数，调用构造函数必须通过new来调用！

// 创建一个空的对象
var hero = new Object();

// 添加属性
hero.name = 'kay';
hero.age = 18;

// 添加方法
hero.attck = function () {
    console.log(this.name + '：要打人了');
}

View Code

属于对象的函数叫方法，独立存在的叫函数。

对象字面量是这种方式的缩写，对象字面量整体的运行过程相当于以上代码一样。

new调用构造函数，会在内存中创建一个对象！

而我们调用一个普通函数是不会创建对象的！

new Object完后创建了一个对象，通过hero变量来接收这个对象。

可以随时增加属性和方法，这是javascript的动态特性。

 3，工厂函数

function createHero(name, age) {
    // 生成一个空对象
    var hero = new Object();
    hero.name = name;
    hero.age = age;
    hero.attck = function () {
        console.log(this.name + '：打人了');
    }
    // 返回这个对象
    return hero;
}

// 接收这个对象
var hero = createHero('kay', 18);

// 访问方法
hero.attck();

View Code

4，自定义构造函数：创建一个自己的构造函数

// 构造函数名首字母大写
function Hero(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        console.log(this.name + '：跑了');
    }
}
// 生成对象
var hero1 = new Hero('kay', 18);
var hero2 = new Hero('andy', 18);

// 访问属性
console.log(hero1.name);

// 访问方法
hero2.run();

View Code

访问属性与方法：

// 访问属性的两种方法
console.log(hero.name);
console.log(hero['name']);

// 访问方法
hero.attck();

View Code

new关键字的执行过程：

1，在内存中创建了一个空的对象。

2，让构造函数中的this指向刚刚创建的对象。

3，执行构造函数，在构造函数中设置属性和方法。

4，返回了当前对象

this出现在以下位置，分别代表什么：

// 1在函数中 ---- 指向window
function test() {
    console.log(this);
} 
test();    // window

// 2 在方法中 ----- 指向这个方法所属的对象
var hero = {
    name: 'kay',
    age: 18,
    attck: function () {
        console.log(this.name + '：打人了');
    }
}
hero.attck();    //  kay：打人了

// 3 在构造函数中 ----- 指向构造函数创建的对象
function Hero(name) {
    this.name = name;
    this.attck = function () {
        console.log(this.name + '：打人了');
    }
}
var hero1 = new Hero('kay');
hero1.attck();    // kay：打人了

View Code

遍历对象和删除对象的属性：

// 创建对象
var hero = {
    name: 'kay',
    age: 18,
    sex: 'boy'
}
// 遍历对象
for (var key in hero) {
    console.log(hero[key]);
}

遍历对象

var hero = {
    name: 'kay',
    age: 18,
    sex: 'boy',
    attck: function () {
        console.log(this.name + '：跑了');
    }
}

delete hero.name;

删除属性|方法

var params = {};
// 动态增加属性
for (var i = 1; i <= 10; i++) {
    params['num' + i] = i;
}
console.log(params);

动态的给对象增加属性

 简单数据类型与复杂数据类型：

简单数据类型（基本数据类型）如以下：

Number String Boolean Undefined Null

复杂数据类型（引用类型）：

Object 数组(Array)

数据在内存中的存储：

 简单数据类型存储在栈上

var n1 = 666;

var n2 = n1;

在栈上开辟一块空间，存储666(666转换成十六进制存放在这块空间)并把变量n1指向这块区域，当我们修改n1的值是不会影响n2的值的，这就是简单数据类型。

复杂数据类型存储在堆上

数组可以当做是对象

var arr1 = [12, 24, 66, 88];

var arr2 = arr1;

在堆上开辟一块空间存储arr1这个对象，并且还在栈上开辟一块空间存储这个对象堆上的内存地址，再把变量arr1指向栈上新开辟的这块空间。

接着再新开辟一块空间，然后把arr1指向堆上的内存地址复制一份赋给了arr2，此时arr1和arr2的堆上地址都是指向同一个对象，当修改arr1的数组，arr2也会跟着改变！

js没有栈和堆的概念，通过栈和堆的方式让我们容易理解代码的一些执行方式

function Params(name, age) {
    this.name = name;
    this.age = age;
}
// 创建对象
var p1 = new Params('kay', 18);
// 都是指向同一个对象
var p2 = p1;

p1.name = 'andy';
console.log(p2.name);    // andy

理解示例1

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var p1 = new Person('kay', 18);

function fn (person) {
    person.name = 'jack';
}

fn(p1);

console.log(p1.name);    // jack

理解示例2

// 构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

var p1 = new Person('kay', 18);

function fn(person) {
    person.name = 'andy';
    // 生成对象
    person = new Person('jack', 18);
    console.log(person.name);    // jack
}

fn(p1);
// 访问属性
console.log(p1.name);    // andy

理解示例3

 

内置对象：学习内置对象，就是学习内置对象所提供的属性和方法

javaScript的组成：ECMAScript BOM DOM

ECMAScript：有变量，数据类型，操作符，流程控制语句（判断和循环），数组，对象，构造函数，内置对象。

javascript中有三种对象：

自定义对象：这个对象的属性和方法我们自己定义。

内置对象：系统自带的，已经提供好了的对象。

浏览器对象：不属于ECMAScript

 Math对象：

Math对象不是构造函数，它具有数学常数和函数的属性和方法。

都是以静态成员的方式提供跟数学相关的运算来找Math中的成员（求绝对值，取整）。

Math.PI                // 圆周率
Math.random()        // 生成随机数
Math.floor()            // 向下取整
Math.ceil()              // 向下取整
Math.round()          // 四舍五入
Math.abs()             // 求绝对值
Math.sin()              // 正弦
Math.cos()             // 余弦
Math.max()            // 求最大值
Math.min()             // 求最小值
Math.pow()            // 求次幂
Math.sqrt()            // 求平方根

属性和方法

 job：求10到20之间的随机数

function random(min, max) {
    // 返回随机数
    return Math.floor(Math.random() * (max - min + 1) + min);
}

console.log(random(10, 20));

job

job：随机生成颜色RGB [0到255]

// 生成随机数
function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min) ;
}
// 颜色拼接
function getRGB(min, max) {
    var color1 = random(min, max),
          color2 = random(min, max),
          color3 = random(min, max);
    return 'RGB:(' + color1 + ',' + color2 + ',' + color3 +')';
}

console.log(getRGB(0, 255));

job

job：模拟实现max()和min()

// 创建对象
var myMath = {
    max: function () {
        // 假设第一个就是最大
        max = arguments[0];
        // 遍历这个伪数组
        for (var i = 1; i < arguments.length; i++) {
            // 比较大小
            if (max < arguments[i]) {
                // 重新赋值
                max = arguments[i];
            }
        }
        return max;
    },
    min: function () {
        // 假设第一个就是最小
        min = arguments[0];
        // 遍历这个伪数组
        for (var i = 1;  i < arguments.length; i++) {
            // 比较大小
            if (min > arguments[i]) {
                // 重新赋值
                min = arguments[i];
            }
        }
        return min;
    }
}
// 找最大值
console.log(myMath.max(12, 67, 88, 22, 99));    // 99
// 找最小值
console.log(myMath.min(12, 2, 45, 1, 78, 88));    // 1

job

 

Date对象

这是一个构造函数，要用new来创建。是实例成员

GMT：格林威治时间，世界标准

GMT + 0800 （中国标准时间）：比英国快8个小时

Date构造函数的几种用法：

1，空构造函数

// 返回当前时间
var time = new Date();
console.log(time);    // Mon Apr 08 2019 23:28:11 GMT+0800 (中国标准时间)

test

2，构造函数中传入毫秒值

// 从1970年一月一日08:00:00开始计算
var time = new Date(88888888);

console.log(time);    // Fri Jan 02 1970 08:41:28 GMT+0800 (中国标准时间)

test

3，传入日期形式的字符串

var time = new Date('2019-1-1 8:8:8');

console.log(time);    // Tue Jan 01 2019 08:08:08 GMT+0800 (中国标准时间)

test

4，传入数字

var time = new Date(2019, 2);

console.log(time);    // Fri Mar 01 2019 00:00:00 GMT+0800 (中国标准时间)

test

 获取现在离1970年的毫秒值的几种方法：

1，.valueOf()

var d = new Date();

console.log(d.valueOf());    // 1554738512959

test

2，.getTime()

var d = new Date();

console.log(d.getTime());    // 1554738640686

test

3，Date.now()

var d = Date.now();
console.log(d);    // 1554738724701

test

4，+ new Date()

var d = + new Date();
console.log(d);    // 1554738811789

test

 

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄