JavaScript-原型链的演变（第八天）

JavaScript-函数和方法区别

1.什么是函数?

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

2.什么是方法?

方法就是显示的和其它的类绑定在一起的, 我们就称之为方法

3.函数和方法的区别

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

4.【补充】：无论是函数还是方法, 内部都有一个叫做this的东东
this是什么? 谁调用了当前的函数或者方法, 那么当前的this就是谁
1.什么是工厂函数?
工厂函数就是专门用于创建对象的函数, 我们就称之为工厂函数
1.什么是构造函数
构造函数和工厂函数一样, 都是专门用于创建对象的
构造函数本质上是工厂函数的简写

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

   function Person(myName, myAge) {
            // let obj = new Object();  // 系统自动添加的
            // let this = obj; // 系统自动添加的
            this.name = myName;
            this.age = myAge;
            this.say = function () {
                console.log("hello world");
            }
            // return this; // 系统自动添加的
        }

1.当我们new Person("shanjialan", 19);系统做了什么事情
1.1会在构造函数中自动创建一个对象
1.2会自动将刚才创建的对象赋值给this
1.3会在构造函数的最后自动添加return this;
【问题】：由于两个对象中的say方法的实现都是一样的, 但是保存到了不同的存储空间中，所以有性能问题，通过三个等号来判断两个函数名称, 表示判断两个函数是否都存储在同一块内存中
console.log(obj1.say === obj2.say); // false

构造函数优化【上】

为了解决上面相同的方法却存储在不同的存储空间里导致性能不好的问题，我们的优化是在构造方法外定义一个函数，让构造函数中的方法指向该函数，这时不同的对象的方法指向的是同一块存储空间

        function mySay() {
            console.log("hello world");
        }
        function Person(myName, myAge) {
            // let obj = new Object();  // 系统自动添加的
            // let this = obj; // 系统自动添加的
            this.name = myName;
            this.age = myAge;
            this.say = mySay;
            // return this; // 系统自动添加的
        }

【问题】虽然这个解决了存储空间的性能问题，但是又带来了新的问题，当前这种方式解决之后存在的弊端
1.1阅读性降低了
1.2污染了全局的命名空间

构造函数优化【中】

为了不污染全局的命名空间，我们将函数放在一个对象中保存起来，访问通过对象名.方法的方式来访问，这样就有效地解决了存储空间和命名空间污染的问题

        // 由于test函数都是属于同一个对象, 所以返回true
        let fns = {
            mySay: function () {
                console.log("hello world");
            }
        }
        function Person(myName, myAge) {
            this.name = myName;
            this.age = myAge;
            this.say = fns.mySay;
        }
        let obj1 = new Person("shanjialan", 19);
        let obj2 = new Person("zs", 44);
        console.log(obj1.say === obj2.say); // true

构造函数优化【下】

其实构造函数优化中的方式并不是特别专业，其实在JavaScript当中提供了一种专业的写法——prototype来存储公共的方法和属性,这样既解决了性能问题，有解决了命名空间污染的问题。

 function Person(myName, myAge) {
            this.name = myName;
            this.age = myAge;
}
Person.prototype={
          function say(){alert("Hello");
}
 let obj1 = new Person("shanjialan", 19);
        let obj2 = new Person("zs", 44);
        console.log(obj1.say === obj2.say); // true

prototype总结

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

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

对象三角恋（原型链）

每个构造函数都有一个属性prototype，prototype保存的对象叫做“原型对象”；
每个原型对象中都有一个属性constructor,constructor保存的对象叫做“构造函数”
通过构造函数构造的对象叫做实例对象,实例对象也有一个属性__proto指向构造它的构造函数的原型对象prototype

对象三角恋.png

Function构造函数

1.JavaScript中函数是引用类型(对象类型), 既然是对象,
所以也是通过构造函数创建出来的,"所有函数"都是通过Function构造函数创建出来的对象
2.JavaScript中只要是"函数"就有prototype属性
"Function函数"的prototype属性指向"Function原型对象"
3.JavaScript中只要"原型对象"就有constructor属性
"Function原型对象"的constructor指向它对应的构造函数
4.Person构造函数是Function构造函数的实例对象, 所以也有proto属性，Person构造函数的proto属性指向"Function原型对象"

加入Function构造函数的三角链.png

Object构造函数

1. JavaScript函数是引用类型(对象类型), 所以Function函数也是对象
2."Function构造函数"也是一个对象, 所以也有proto属性
"Function构造函数"proto属性指向"Function原型对象"*
1. JavaScript中还有一个系统提供的构造函数叫做Object，只要是函数都是"Function构造函数"的实例对象
4.只要是对象就有proto属性, 所以"Object构造函数"也有proto属性， "Object构造函数"的proto属性指向创建它那个构造函数的"原型对象"
5.只要是构造函数都有一个默认的属性, 叫做prototype，prototype属性保存着一个对象, 这个对象我们称之为"原型对象"
6.只要是原型对象都有一个默认的属性, 叫做constructor， constructor指向当前原型对象对应的那个"构造函数"

加入Function和Object构造函数的三角链.png

总结

1.所有的构造函数都有一个prototype属性, 所有prototype属性都指向自己的原型对象
2,所有的原型对象都有一个constructor属性, 所有constructor属性都指向自己的构造函数
3.所有函数都是Function构造函数的实例对象
4.所有函数都是对象, 包括Function构造函数
5.所有对象都有proto属性
6.普通对象的proto属性指向创建它的那个构造函数对应的"原型对象"
7.所有对象的proto属性最终都会指向"Object原型对象"
8."Object原型对象"的proto属性指向NULL
【总结】
所有对象都有一个proto属性；
Function对象是所有函数的祖先函数；
每个构造函数都有一个prototype属性，指向该函数的“原型对象”
每个构造函数的原型对象都有一个constructor属性，指向其构造函数；
所有函数都是对象；

注意点

使用优化【下】的方法，即使用构造函数名.prototype，会破坏原型链的关系，因为这相当于重新指定了构造函数的prototype覆盖掉，会导致之前的原型链关系被破坏，因此使用prototype属性时一定要指定constructor来确保原型链的一致性。
原型链是指通过__ proto __ 属性来串起来的链，当访问一个属性或者方法时，自己有的用自己的，自己没有的从原型链上去找，原型链上有用原型链上的，原型链没有则报错
【注意点】：
操作的是私有属性(局部变量)
注意点:
在给一个对象不存在的属性设置值的时候, 不会去原型对象中查找, 如果当前对象没有就会给当前对象新增一个不存在的属性
由于私有属性的本质就是一个局部变量, 并不是真正的属性, 所以如果通过对象.xxx的方式是找不到私有属性的, 所以会给当前对象新增一个不存在的属性

终结版

终结版.png

function Person(myName, myAge) {
    this.name = myName;
    this.age = myAge;
}
Person.prototype = {
    say: function() {
        console.log("小单，加油！！每天都是美好的一天，小豌豆，别放弃~!");
    }
}
let yiya = new Person("shanjialan", 19);
console.log(yiya.__proto__ === Person.prototype);
console.log(Person.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Person.prototype.__proto__);
console.log(Function.__proto__ === Function.prototype);
console.log(Object.__proto__ === Function.prototype);
console.log(Object.prototype.__proto__ === null);
console.log(Object.prototype.constructor === Object);
console.log(Function.prototype.__proto__ === Person.prototype.__proto__);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Person.prototype.__proto__ === Object.prototype);
console.log(Function.prototype.__proto__);
console.log(Person.prototype.__proto__);

运行结果截图.png

JavaScript-原型链的演变（第八天）