前端学习笔记-JS-对象

对象

 

为什么要有对象

js中的对象可以让结构更加清晰

function printPerson(name, age, sex....) {
}
// 函数的参数如果特别多的话，可以使用对象简化
function printPerson(person) {
  console.log(person.name);
  ……
}

 

什么是对象

现实生活中：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。
举例： 一部车，一个手机
车是一类事物，门口停的那辆车才是对象
    特征：红色、四个轮子
    行为：驾驶、刹车

 

JavaScript中的对象

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

• 事物的特征在对象中用属性来表示。

• 事物的行为在对象中用方法来表示。

 

属性和方法

如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性，属性一般是名词，用来描述事物的特征
如果一个函数属于一个对象所有，那么该函数就可以称之为该对象的一个方法，方法是动词，描述事物的行为和功能

 

变量、属性、函数、方法的区别

1.变量和属性的相同点：他们都是用来存储数据的

  变量和属性的不同点：变量 单独声明并赋值  使用的时候直接写变量名 单独存在
                                      属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性

2. 函数和方法的相同点： 都是实现某种功能  做某件事

    函数和方法的不同点：函数是单独声明 并且调用的 函数名() 单独存在的
                                        方法 在对象里面 调用的时候 对象.方法()

 

对象字面量

对象字面量： {}

对象创建方式

• 对象字面量

 <script>
        // 1.利用对象字面量创建对象 {}
        // var obj = {};  // 创建了一个空的对象 
        var obj = {
                uname: '张三疯',
                age: 18,
                sex: '男',
                sayHi: function() {
                    console.log('hi~');

                }
            }
            // (1) 里面的属性或者方法我们采取键值对的形式  键 属性名 ： 值  属性值 
            // (2) 多个属性或者方法中间用逗号隔开的
            // (3) 方法冒号后面跟的是一个匿名函数
        // 2. 使用对象
        // (1). 调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的
        console.log(obj.uname);
        // (2). 调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);
        // (3) 调用对象的方法 sayHi   对象名.方法名() 千万别忘记添加小括号
        obj.sayHi();
    </script>

• new Object()创建对象

    <script>
        // 利用 new Object 创建对象
        var obj = new Object(); // 创建了一个空的对象
        obj.uname = '张三疯';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function() {
                console.log('hi~');

            }
            // (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
            // (2) 每个属性和方法之间用 分号结束
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();
    </script>

• 工厂函数创建对象

function createPerson(name, age, job) {
  var person = new Object();
  person.name = name;
  person.age = age;
  person.job = job;
  person.sayHi = function(){
    console.log('Hello,everyBody');
  }
  return person;
}
var p1 = createPerson('张三', 22, 'actor');

• 构造函数创建对象

       构造函数与对象：  

        1） 构造函数  明星 泛指的某一大类  

        2.）对象 张学友 特指是一个具体的事物 

        3.）我们利用构造函数创建对象的过程我们也称为对象的实例化

    <script>
	    // 因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能复制 
        // 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数
        // 又因为这个函数不一样，里面封装的不是普通代码，而是 对象  
        // 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
		
        // 构造函数的语法格式
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {}
        // }
        // new 构造函数名();
		
		// 我们需要创建四大天王的对象  相同的属性： 名字 年龄 性别  相同的方法： 唱歌
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        // console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
        var zxy = new Star('张学友', 19, '男');
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing('李香兰')



        // 1. 构造函数名字首字母要大写
        // 2. 我们构造函数不需要return 就可以返回结果
        // 3. 我们调用构造函数 必须使用 new
        // 4. 我们只要new Star() 调用函数就创建一个对象 ldh  {}
        // 5. 我们的属性和方法前面必须添加 this
    </script>

工厂函数与构造函数的区别：

1. 构造函数中没有显式的对象创建代码
2. 构造函数新对象应具备的属性与方法是通过this引用添加的.
3. 构造函数中没有return语句
4.构成函数通常会把对象构造函数的首字母设置为大写的，以区别于普通函数。
5.对象的constructor属性：

   a).使用工厂函数创建对象，每个对象的constructor属性引用Object()

   b).使用对象构造函数创建对象，每个对象的constructor属性引用这个构造函数

 

new关键字

构造函数 ，是一种特殊的函数。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。

1. 构造函数用于创建一类对象，首字母要大写。

2. 构造函数要和new一起使用才有意义。

new在执行时会做四件事情：

new会在内存中创建一个新的空对象
new 会让this指向这个新的对象
执行构造函数  目的：给这个新对象加属性和方法
new会返回这个新对象（所以构造函数里面不需要return）

this详解

JavaScript中的this指向问题，有时候会让人难以捉摸，随着学习的深入，我们可以逐渐了解
现在我们需要掌握函数内部的this几个特点：
    1. 函数在定义的时候this是不确定的，只有在调用的时候才可以确定
    2. 一般函数直接执行，内部this指向全局window
    3. 函数作为一个对象的方法，被该对象所调用，那么this指向的是该对象
    4. 构造函数中的this其实是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new关键字来调用，从而实现实例化