浅谈JS对象的那些事(1)

最新推荐文章于 2024-08-14 15:45:18 发布

2401_84619145

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量416

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2401_84619145/article/details/139943034

版权

*   行为：驾驶、刹车

JS中的对象

JS中的对象
- JS中的对象其实是对生活中对象的一个抽象
- JS的对象是无序属性的集合
其属性可以包含基本知识、对象或函数。对象就是一组没有顺序的值。我们可以吧JS中的对象想象成键值对，其中值可以使数据和函数
对象的行为和特征
- 特征—在对象中用属性表示
- 行为—在对象中用方法表示

对象字面量

===============================================================

创建一个对象最简单的方式是使用对象字面量赋值给变量。类似数组
对象字面量语法：{}
内部可以存放多条数据，数据与数据之间用逗号分隔，最后一个后面不要加逗号
每条数据都是有属性名和属性值组成，键值对写法：k: v
- k：属性名
- v：属性值，可以是任意类型的数据，比如简单类型数据、函数、对象


var obj = {

    k1: v1,

    k2: v2,

    k3: v3

}

区分属性和方法

属性：
- 对象的描述性特征，一半是名词，相当于定义在对象内部的变量
方法：
- 对象的行为和功能，一般是动词，定义在对象中的函数

对象数据的调用和更改

====================================================================

用对象的变量名打点调用某个属性名，得到属性值
在对象内部用this打点调用属性名。this替代对象
用对象的变量名后面加[]调用，[]内部是字符串格式的属性名
调用方法时，需要在方法名后加()执行


var obj = {

    name: "XL",

    age: 18,

    sayHi: function () {

        console.log(this.name + "向你致敬")

    }

};



console.log(obj.name)

console.log(obj.age)

obj.sayHi()



console.log(obj["name"])

console.log(obj["age"])

obj["sayHi"]()

更改属性的属性值方法：先调用属性，在等号赋值 obj.age = 18888
增加新的属性和属性值：使用点语法或者[]方法直接定义新属性，等号赋值 obj.height = 187
删除一条属性：使用delete关键字，空格后面加属性调用 delete obj.age

new Object() 方法创建对象

=============================================================================

Object() 构造函数，是一种特殊的函数。主要用来创建对象时初始化对象，即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中
1. 构造函数用于创建一类对象，首字母要大写
2. 构造函数要和new一起使用才有意义


// new Object() 创建新对象

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

// 添加属性和方法

nObj.name = "SL";

nObj.age = 18;

nObj.sayHi = function () {

    console.log("你好")

};

// 调用

console.log(nObj);

new在执行时会做四件事情

new会在内存中和创建一个新的空对象
new会让this指向这个新的对象
执行构造函数目的：给这个新对象加属性和方法
new会返回这个新对象

工厂函数方法创建对象

====================================================================

如果要创建多个类似的对象，可以将new Object() 过程封装到一个函数中，将来调用函数就能创建一个对象，相当于一个生产对象的函数工厂，用来简化代码


// 工厂方法就是相当于对new Object() 方法的一个封装

function createObj (name, age) {

    // 创建一个空对象

    var cObj = new Object();

    // 添加属性和方法，属性可以接受参数的值

    cObj.name = name;

    cObj.age = age;

    cObj.sayHi = function () {

        console.log("你好")

    };

    // 将对象作为函数的返回值

    return cObj;

}

// 相互创建一个对象可以调用工厂函数

var c1 = createObj("zs", 18);

var c2 = createObj("ls", 28);

// 输出

console.log(c1);

console.log(c2);

自定义构造函数创建对象

=====================================================================

比工厂方法更加简单
自定义一个创建具体对象的构造函数，函数内部不需要new一个构造函数的过程，直接使用this代替对象进行属性和方法的书写，也不需要return一个返回值
使用时，利用new关键字调用自定义的构造函数即可
注意：构造函数的函数名首字母需要大写，区别于其他普通函数名


// 自己定义一个构造函数

function Obj(name, age) {

    // 不需要使用new一个新对象 用this替代将来创建的新对象

    this.name = name;

    this.age = age;

    this.sayHi = function () {

        console.log("你好")

    }



### 性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）  

2.如何优化webpack构建的性能  

3.移动端的性能优化  

4.Vue的SPA 如何优化加载速度  

5.移动端300ms延迟  

6.页面的重构

**所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。**



![](https://img-blog.csdnimg.cn/20210323221732119.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)

![](https://img-blog.csdnimg.cn/20210323221747467.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)