JS-11-对象-创建 / 构造函数 / 函数与对象关系

一、JavaScript-创建默认对象

1.JavaScript中提供了一个默认的类Object, 我们可以通过这个类来创建对象;

2.由于我们是使用系统默认的类创建的对象, 所以系统不知道我们想要什么属性和行为, 所以我们必须手动的添加我们想要的属性和行为;

3.如何给一个对象添加属性 ;
对象名称.属性名称 = 值;

4.如何给一个对象添加行为;
对象名称.行为名称 = 函数;

例：

let obj = {
    name: "abc",
    age: 23,
    say: function () {
        console.log("hello world");
    }
};
console.log(obj.name);
console.log(obj.age);
obj.say();

---

二、JavaScript-函数和方法区别

1.什么是函数?
函数就是没有和其它的类显示的绑定在一起的, 我们就称之为函数；

2.什么是方法?
方法就是显示的和其它的类绑定在一起的, 我们就称之为方法；

3.函数和方法的区别 :
3.1函数可以直接调用, 但是方法不能直接调用, 只能通过对象来调用；
3.2函数内部的this输出的是window, 方法内部的this输出的是当前调用的那个对象；

4.无论是函数还是方法, 内部都有一个叫做this的东东；
this是什么? 谁调用了当前的函数或者方法, 那么当前的this就是谁；

---

三、什么是工厂函数?

工厂函数就是专门用于创建对象的函数, 我们就称之为工厂函数；
例：

function createPerson(myName,myAge) {           
    let obj = {
                name: myName,
                age: myAge,
                say: function () {
                    "hello abc";
                }           
};          
return obj;       
} 
       
let obj1 = createPerson("cy",22);       
let obj2 = createPerson("yc",33);       
console.log(obj1);;       
console.log(obj2);

---

四、什么是构造函数

1.构造函数和工厂函数一样, 都是专门用于创建对象的；
构造函数本质上是工厂函数的简写；

2.构造函数和工厂函数的区别；
2.1构造函数的函数名称首字母必须大写 ；
2.2构造函数只能够通过new来调用；
例：

function Person(myName,myAge) {
                this.name= myName;
                this.age=myAge;
                this.say= function () {
                    "hello abc";
                }       
}

当我们new Person(“abc”, 44);系统做了什么事情 :
1.1会在构造函数中自动创建一个对象
1.2会自动将刚才创建的对象赋值给this
1.3会在构造函数的最后自动添加return this;

---

补充：

function demo() {
            console.log("demo");
        }
        // 通过三个等号来判断两个函数名称, 表示判断两个函数是否都存储在同一块内存中
        console.log(demo === demo); // true

构造函数的优化：

function Person(myName, myAge) {
            
            this.name = myName;
            this.age = myAge;
           
        }
        //prototype属性是专门用于保存对象中公共的函数和变量的
        Person.prototype = {
            say: function () {
                console.log("hello world");
            }
        }
        let obj1 = new Person("lnj", 34);
        obj1.say();
        let obj2 = new Person("zs", 44);
        obj2.say();
        console.log(obj1.say === obj2.say); // true

---

五、JavaScript-prototype特点

1.prototype特点

    1.1存储在prototype中的方法可以被对应构造函数创建出来的所有对象共享;
    1.2prototype中除了可以存储方法以外, 还可以存储属性;
    1.3prototype如果出现了和构造函数中同名的属性或者方法, 对象在访问的时候, 访问到的是构造函中的数据;

    2.prototype应用场景
    prototype中一般情况下用于存储所有对象都相同的一些属性以及方法;
    如果是对象特有的属性或者方法, 我们会存储到构造函数中;

2.JavaScript-对象三角恋关系

 1.每个"构造函数"中都有一个默认的属性, 叫做prototype；
    prototype属性保存着一个对象, 这个对象我们称之为"原型对象"；
  2.每个"原型对象"中都有一个默认的属性, 叫做constructor；
     constructor指向当前原型对象对应的那个"构造函数"；
  3.通过构造函数创建出来的对象我们称之为"实例对象"；
    每个"实例对象"中都有一个默认的属性, 叫做__proto__；
    __proto__指向创建它的那个构造函数的"原型对象"；

关系图：

---

六、JavaScript-Function函数

1.JavaScript中函数是引用类型(对象类型), 既然是对象, 所以也是通过构造函数创建出来的,"所有函数"都是通过Function构造函数创建出来的对象；

2.JavaScript中只要是"函数"就有prototype属性；
“Function函数"的prototype属性指向"Function原型对象”；

3.JavaScript中只要"原型对象"就有constructor属性；
"Function原型对象"的constructor指向它对应的构造函数；

4.Person构造函数是Function构造函数的实例对象, 所以也有__proto__属性；
Person构造函数的__proto__属性指向"Function原型对象"；

• JavaScript-Object函数

“Object构造函数"的__proto__属性指向创建它那个构造函数的"原型对象”；

5.只要是构造函数都有一个默认的属性, 叫做prototype；
prototype属性保存着一个对象, 这个对象我们称之为"原型对象"；

6.只要是原型对象都有一个默认的属性, 叫做constructor；
constructor指向当前原型对象对应的那个"构造函数"；

---

七、JavaScript-函数对象关系

1.所有的构造函数都有一个prototype属性, 所有prototype属性都指向自己的原型对象；
2,所有的原型对象都有一个constructor属性, 所有constructor属性都指向自己的构造函数；
3.所有函数都是Function构造函数的实例对象；
4.所有函数都是对象, 包括Function构造函数；
5.所有对象都有__proto__属性；
6.普通对象的__proto__属性指向创建它的那个构造函数对应的"原型对象"；
7.所有对象的__proto__属性最终都会指向"Object原型对象"；
8."Object原型对象"的__proto__属性指向NULL；

函数对象完整关系图示：

---

八、JavaScript-原型链

Person.prototype = {
            // 注意点: 为了不破坏原有的关系, 在给prototype赋值的时候, 需要在自定义的对象中手动的添加constructor属性, 手动的指定需要指向谁
            constructor: Person,
            // currentType: "人",
            // say: function () {
            //     console.log("hello world");
            // }
        }

1. 对象中__proto__组成的链条我们称之为原型链;
2. 对象在查找属性和方法的时候, 会先在当前对象查找, 如果当前对象中找不到想要的, 会依次去上一级原型对象中查找, 如果找到Object原型对象都没有找到, 就会报错;

---

九、JavaScript-属性注意点

    function Person(myName, myAge) {
        this.name = myName;
        this.age = myAge;
    }
    Person.prototype = {
        constructor: Person,
        currentType: "人",
        say: function () {
            console.log("hello world");
        }
    }
    let obj = new Person("abc", 54);
    // console.log(obj.currentType); // "人"
    // console.log(obj.__proto__.currentType); // "人"

    // 注意点: 在给一个对象不存在的属性设置值的时候, 不会去原型对象中查找, 如果当前对象没有就会给当前对象新增一个不存在的属性
    obj.currentType = "新设置的值";
    console.log(obj.currentType); // 新设置的值
    console.log(obj.__proto__.currentType); // "人"

---

-End