一、简述
没什么可说的，直接上代码。
二、内容
<!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>