一篇关于JavaScript中prototype的文章

Posted 2020-08-15 空白凌乱感

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一篇关于JavaScript中prototype的文章相关的知识，希望对你有一定的参考价值。

一、简述

　　没什么可说的，直接上代码。

二、内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function Main() {
            function testClass() {
                this.test1 = function () {
                    return "这个是this的test1属性";

                }
            }

            testClass.prototype.test2 = function () {
                return "这个是prototype添加的test2属性";

            }
            console.log(testClass);  //显示代码
            //console.log(testClass.test1())  //报错，不存在，test2也一样。说明prototype添加的属性是给 对象 用的

            var t = new testClass();
            console.log(t)  //显示testClass类，但是没显示test2属性
            console.log(t.test2());  //正常显示返回值，test1正常返回。

            console.log("testClass.prototype ↓")
            console.log(testClass.prototype) //返回一个Object类型，一个是test2，一个是constructor =》 这个就是testClass本身。找不到test1

            console.log("t.prototype ↓")
            console.log(t.prototype)  //空的
            console.log("-----------------------------")

            testClass.prototype.test2 = function () {
                return "覆盖了Test2属性";
            }

            console.log(t)  //没变化
            console.log(t.test2())  //覆盖了

            console.log("test1覆盖说明 ↓")
            testClass.prototype.test1 = function () {
                return "覆盖test1属性";

            }
            console.log(t)  //没变化
            console.log(t.test1())  //没覆盖，或者函数运行时会先去本体的函数中去找，如果找到则运行，找不到则去prototype中寻找函数。
            console.log(testClass.prototype)  // 出现test1，可以看出上面的 testClass.prototype也受影响了。
            console.log("验证上面的testClass.prototype为什么会受影响，也有test1 ↓")
            var i = {};
            i.test1 = function () { }
            console.log(i);  //受影响了。显示有test1、test2，但是把这里的i改成i.test2()的话，则报错。说明这里会显示test1、test2，是console.log的机制问题，
                             //可能是最后才执行的，加上那时候i对象已经添加了test2了。
            i.test2 = function () { }
            console.log(i);  

            var array = [];
            array.push(1)  //不受影响
            console.log(array)
            array.push(2)
            console.log(array)

            console.log("---------- prototype深入问题 --------------------")

            function baseClass() {
                this.showMsg = function () {
                    return "baseClass的showMsg方法"; 
                }

            }

            function extendClass() {
                this.extendShowMsg = function () {
                    return "extendClass的extendShowMsg方法";
                }
                /*this.showMsg = function () {
                    return "extendClass的showMsg方法";

                }*/
            }

            extendClass.prototype.proTest = function () {
                return "这个是prototype添加的proTest属性";

            }

            extendClass.prototype = new baseClass();
            console.log(extendClass)  //显示extendClass代码。
            console.log(extendClass.prototype);  //显示baseClass的对象。其中隐藏了 .constructor
            var instance = new extendClass();
            console.log(instance.showMsg());  // 显示baseClass的showMsg方法，如果extendClass也有同名的showMsg，那么就显示是extendClass的showMsg的方法
            console.log(instance.constructor)  //显示类代码。说明对象的.constructor 是类。  baseCalss === instance.constructor
            console.log(instance.extendShowMsg())  //正常显示。
            console.log(instance.proTest);  //显示为空，被清空覆盖了。




            console.log("------------------------------")
            var testClassPro = testClass.prototype;
           /* testClassPro.prototype.test3 = function () {  //不能添加
                return "testClass prototype中的prototype";
            }*/
            console.log(testClassPro);


        }
        Main();

    </script>
</head>
<body>

</body>
</html>

以上是关于一篇关于JavaScript中prototype的文章的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript理解原型与原型链

关于prototype.js的一些技术说明

关于javascript的原型和原型链，看我就够了

从mixin到new和prototype：Javascript原型机制详解