JS-原型（prototype），原型链是不是无限套娃？

尚硅谷JavaScript高级教程(javascript实战进阶)

原型 prototype

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype

这个属性对应着一个对象，这个对象就是我们所谓的原型对象

如果函数作为普通函数调用prototype没有任何作用

当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，

指向该构造函数的原型对象，我们可以通过__proto__来访问该属性

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，

我们可以将对象中共有的内容，统一设置到原型对象中。

1. 原型继承

JS是一门面向对象的语言，而且它还是一个基于原型的面向对 象的语言。

所谓的原型实际上指的是，在构造函数中存在着一个名为原型 的(prototype)对象，这个对象中保存着一些属性，凡是通过该构造函数创建的对象都可以访问存在于原型中的属性。

最典型的原型中的属性就是toString()函数，实际上我们的对象 中并没有定义这个函数，但是却可以调用，那是因为这个函数 存在于Object对应的原型中。JS是一门面向对象的语言，而且它还是一个基于原型的面向对象的语言。

2. 设置原型

原型就是一个对象，和其他对象没有任何区别，可以通过构造函数来获取原型对象。

构造函数. prototype

和其他对象一样我们可以添加修改删除原型中的属性，也可以 修改原型对象的引用。

需要注意的是prototype属性只存在于函数对象中，其他对象是没有prototype属性的。

每一个对象都有原型，包括原型对象也有原型。特殊的是 Object的原型对象没有原型。

3. 获取原型对象的方法

除了可以通过构造函数获取原型对象以外，还可以 通过具体的对象来获取原型对象。

• Object.getPrototypeOf(对象)

• 对象.proto

• 对象. constructor.prototype

需要注意的是，我们可以获取到Object的原型对象， 也可以对它的属性进行操作，但是我们不能修改 Object原型对象的引用。

当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，

如果没有则会去原型对象中寻找，如果找到则直接使用.



以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，

这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了
<script type="text/javascript">

		function MyClass() {}

        //向MyClass的原型中添加属性a
        MyClass.prototype.a = 123;

        //向MyClass的原型中添加一个方法
        MyClass.prototype.sayHello = function() {
            alert("hello");
        };

        var mc = new MyClass();

        var mc2 = new MyClass();

        console.log(MyClass.prototype);//{a: 123, sayHello: ƒ, constructor: ƒ}a: 123sayHello: ƒ ()constructor: ƒ MyClass()__proto__: Object

        console.log(mc2.__proto__ == MyClass.prototype);//true

        //向mc中添加a属性
        mc.a = "我是mc中的a";

        console.log(mc.a);//我是mc中的a
        console.log(mc2.a);//123

        mc.sayHello();
</script>

function MyClass() {}

//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的名字";

var mc = new MyClass();
mc.age = 18;

console.log(mc.name);//我是原型中的名字

//使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
console.log("name" in mc);//true

4. 原型链

基于我们上边所说的，每个对象都有原型对象，原型对象也有原型对象。

由此，我们的对象，和对象的原型，以及原型的原型，就构成了一个原型链。

比如这么一个对象：

var mc = new MyClass(123,456);

这个对象本身，原型MyClass.proprototype原型对象的原型对象是Object，Object对象还有其原型。这组对象就构成了一个原型链。

这个链的次序是：mc对象、mc对象原型、原型的原型（Object）、Object的原型 。

当从一个对象中获取属性时，会首先从当前对象中查找，如果没有则顺着向 上查找原型对象，直到找到Object对象的原型位置，找到则返回，找不到则 返回undefined。

5. hasOwnProperty()方法

可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
使用该方法只有当对象自身中含有属性时，才会返回true。

原型对象也是对象，所以它也有原型，
当我们使用一个对象的属性或方法时，会现在自身中寻找，自身中如果有，则直接使用，
如果没有则去原型对象中寻找，如果原型对象中有，则使用，
如果没有则去原型的原型中寻找,直到找到Object对象的原型，
Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。

//查看mc的原型对象是否含有hasOwnProperty这个方法
console.log(mc.__proto__.hasOwnProperty("hasOwnProperty")); //false

//查看mc的原型对象的原型对象是否含有hasOwnProperty这个方法
console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty")); //true

//c查看对象的原型的原型的原型对象
console.log(mc.__proto__.__proto__);//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, ....}


console.log(mc.hello); //undefined

console.log(mc.__proto__.__proto__.__proto__);//null

6. toString()方法（类似重写java中的toString()方法）

最典型的原型中的属性就是toString()函数，实际上我们的对象 中并没有定义这个函数，但是却可以调用，那是因为这个函数 存在于Object对应的原型中。

<script type="text/javascript">

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

        //修改Person原型的toString
        Person.prototype.toString = function(){
            return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
        };


        //创建一个Person实例
        var per = new Person("孙悟空",18,"男");
        var per2 = new Person("猪八戒",28,"男");

        //当我们直接在页面中打印一个对象时，事件上是输出的对象的toString()方法的返回值
        //如果我们希望在输出对象时不输出[object Object]，可以为对象添加一个toString()方法
        //Person[name=孙悟空,age=18,gender=男]
        /*per.toString = function(){
                        return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
                    };*/

        var result = per.toString();
        //console.log("result = " + result);
        //console.log(per.__proto__.__proto__.hasOwnProperty("toString"));
        console.log(per2);
        console.log(per);
</script>

7. 垃圾回收

就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾。这些垃圾积攒过多以后，会导致程序运行的速度过慢，所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生垃圾。
当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。
在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作
我们需要做的只是要将不再使用的对象设置null即可

<script type="text/javascript">
    var obj = new Object();
    //对对象进行各种操作。。。。
    obj = null;
</script>

8. 思维导图