1.关键词:类,对象;
javascript 中实际上没有严格的【类和对象】的概念,只是实现了相关效果,为了方便理解暂时
使用【类和对象】;
2.明确 类中的 【public/private变量】的使用范围,明确 类方法、对象方法的使用范围;
3. 区别 三种类型的错误(方法"未定义",方法可调用但是返回值是"未定义"):
TypeError: undefined is not a function
Car.getCarName_3()},undefined
ReferenceError: carMadeIn is not defined
4.查看运行效果可下载附件代码,运行html文件在console窗口可见。
ps: Chrome, Firfox的控制台所显示的信息稍有不同。
构造函数:
/* 构造函数/类 */ function Animal(pName) { // public, 公有变量, 可被[对象(实例)方法 -- this.xxxx()], [原型(prototype)方法]访问; // 也可以被对象直接访问[obj.name]; this.name = pName || "defaultName"; this.size = "middle"; // private, 私有变量, only can be read by "this.xxxx()" var owner = "tom"; // 对象(实例)方法, 只能被 对象(实例)调用; this.getName = function() { return "animalName"; }; this.getName_this_byObj = function() { return this.name; }; this.getOwner_var_byObj = function() { // this.owner, // owner, return owner; }; this.excuteSameNameFunc = function() { return "Hello, this is <this.excuteSameNameFunc>"; }; }; // 原型(prototype)方法, 只能被 对象(实例)调用; Animal.prototype.getColor = function() { return "Yellow"; }; Animal.prototype.getName_this_prototype_byObj = function() { return this.name; }; Animal.prototype.getOwner_var_prototype_byObj = function() { return owner; }; Animal.prototype.excuteSameNameFunc = function() { return "Hello, this is<prototype-excuteSameNameFunc>"; }; // 只能被 对象(实例)调用; Animal.prototype.bodyHeight = "50cm"; // 类(class)方法, 只能被 类 调用;[又称:静态方法] Animal.getAge = function() { return "3"; }; Animal.getSize_this_ByClass = function() { return this.size; }; Animal.getOwner_var_ByClass = function() { // owner -> e:ReferenceError: owner is not defined // this.owner -> undefined return owner; };
测试分支:
testOOP : function(orderNo, obj) { var key = ""; var val = ""; try { key = (orderNo + ":" + key); switch (orderNo) { case 1: utilTemp.log("--- >>> 调用方式:[类名.方法()]", [ 'font-size:25px', 'line-height:28px', 'color: skyblue' ].join(';')); key = key + "this.getName()--[Animal.getName()]:"; val = Animal.getName(); // utilTemp.log(key + Animal.getName()); break; case 2: key = key + "Animal.prototype.getColor()--[Animal.getColor()]:"; val = Animal.getColor(); // utilTemp.log(key + Animal.getColor()); break; case 3: key = key + "Animal.getAge()--[Animal.getAge()]:"; val = Animal.getAge(); // utilTemp.log("key:" + key + Animal.getAge()); break; case 4: utilTemp.log("--- >>> 调用方式:[实例对象.方法()]", [ 'font-size:25px', 'line-height:28px', 'color: skyblue' ].join(';')); key = key + "this.getName()--[obj.getName()]:"; val = obj.getName(); // utilTemp.log(key + obj.getName()); break; case 5: key = key + "Animal.prototype.getColor()--[obj.getColor()]:"; val = obj.getColor(); // utilTemp.log(key + obj.getColor()); break; case 6: key = key + "Animal.getAge()--[obj.getAge()]:"; val = obj.getAge(); // utilTemp.log(key + obj.getAge()); break; case 7: utilTemp.log("--- >>> 利用可调用/合法 的方法,访问属性: this/var;", [ 'font-size:25px', 'line-height:28px', 'color: skyblue' ].join(';')); key = key + "{this.size--Animal.getSize_this_ByClass()}---[Animal.getSize_this_ByClass()]:"; val = Animal.getSize_this_ByClass(); break; case 8: key = key + "{var owner--Animal.getOwner_var_ByClass()}---[Animal.getOwner_var_ByClass()]:"; val = Animal.getOwner_var_ByClass(); break; case 9: key = key + "{this.name--this.getName_this_byObj()}---[obj.getName_this_byObj()]:"; val = obj.getName_this_byObj(); break; case 10: key = key + "{var owner--[this.getOwner_var_byObj()}---[obj.getOwner_var_byObj()]:"; val = obj.getOwner_var_byObj(); break; case 11: key = key + "{this.name--[Animal.prototype.getName_this_prototype_byObj()}" + "---[obj.getName_this_prototype_byObj()]:"; val = obj.getName_this_prototype_byObj(); break; case 12: key = key + "{var owner--[Animal.prototype.getOwner_var_prototype_byObj()}" + "---[obj.getOwner_var_prototype_byObj()]:"; val = obj.getOwner_var_prototype_byObj(); break; case 13: utilTemp.log("--- >>> 对象调用同名方法之 优先级( this.function() );", [ 'font-size:25px', 'line-height:28px', 'color: skyblue' ].join(';')); key = key + "{[Animal.prototype.excuteSameNameFunc() / this.excuteSameNameFunc()}" + "---[obj.excuteSameNameFunc()]:"; val = obj.excuteSameNameFunc(); break; case 14: utilTemp.log("--- >>> 类/对象(实例) 直接访问属性", [ 'font-size:25px', 'line-height:28px', 'color: skyblue' ].join(';')); key = key + "{this.size}--[Animal.size]:"; val = Animal.size; break; case 15: key = key + "{this.size}--[obj.size]:"; val = obj.size; break; case 16: key = key + "{var owner}--[Animal.owner]:"; val = Animal.owner; break; case 17: key = key + "{var owner}--[obj.owner]:"; val = obj.owner; break; case 18: key = key + "{Animal.prototype.bodyHeight}--[Animal.bodyHeight]:"; val = Animal.bodyHeight; break; case 19: key = key + "{Animal.prototype.bodyHeight}--[obj.bodyHeight]:"; val = obj.bodyHeight; break; case 20: break; default: // nothing! } utilTemp.log(key + val); } catch (e) { utilTemp.error(key + ">>>e:" + e); } },
测试入口:
testMain : function() { var two = new Animal("Kitty"); for ( var i = 1; i <= 20; i++) { utilTemp.testOOP(i, two); } },
测试截图:
结论:
额,一目了然。
xxx方法可以正常使用、xxx属性可以正常访问。。。
相关推荐
JavaScript学习深入—面向对象编程,很不错的一本书。
第3部分深入探索JavaScript,介绍了语法、值、运算符、布尔类型、数字、字符串、语句、异常捕获、函数、变量、对象与继承、数组、正则表达式、Date、Math、JSON、标准全局变量、编码和JavaScript、ECMAScript 5的新...
JavaScript对象也可以称作一种数据结构,正如我们经常听说的“散列(hash)”、“散列表(hashtable)”、“字典 (dictionary)”、“关联数组(associative array)”。 JavaScript中对象可以分为三类: ①内置...
JavaScript对象也可以称作一种数据结构,正如我们经常听说的“散列(hash)”、“散列表(hashtable)”、“字典 (dictionary)”、“关联数组(associative array)”。 JavaScript中对象可以分为三类: ①内置...
JavaScript对象,数组,字符串,使用正则表达式操纵字符串,客户端,控制文档结构的模型,JavaScript事件驱动模型,CSS,Cookie,XML和JSON,Ajax,深入JavaScript面向对象编程,深入JavaScript函数式编程,深入...
这本书对javascript的一些核心技术,面向对象思想讲的很到位,分析的很容易理解,适合初学者以及想深入学习javascript OO的人
《JavaScript学习指南(第2版)》系统地介绍了JavaScript的基本语法、基本对象、调试工具与排错技术、事件处理机制、浏览器对象模型/文档对象模型(BOM/DOM)等方面的知识,并通过一个复杂的示例深入探讨了Ajax应用。...
讲述你不了解的JavaScript问题 JavaScript学习心得
_filesjavascript如何避免内存泄露 - - JavaEye技术网站_filesprototype_js深入研究_files从 prototype_js 深入学习 javascript 的面向对象特性 - - AJAX - JavaEye论坛_files带参数的闭包函数的巧妙应用 - ...
web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用,从而忽略了对原生 JavaScript 的学习和深入理解。所以,经常出现的情况是,很多做了多年 JS 开发的程序员对闭包、函数式编程、原型总是说不...
为了启发你的思考,《深入浅出javascript(中文版)》覆盖了所有的java script基本知识,从基本网络编程技巧,如变量、函数和循环语句,到高级一些的专题,如表单验证、dom操作、客户端对象、脚本程序调试——甚至是...
JavaScript学习指南(第3版)》系统地介绍了JavaScript的基本语法、基本对象、调试工具与排错技术、事件处理机制、浏览器对象模型/文档对象模型(BOM/DOM)等方面的知识,并通过一个复杂的示例深入探讨了Ajax应用。...
下面我们深入了解一下js对象。 js中对象的分类跟之前我们学过的语言中函数的分类一样,一个是系统自带的叫预定义对象,一个是用户自己写的叫自定义对象。 大体内容如下图所示: 一:核心对象 1.Array对象 数组...
由浅入深,包括6篇21章,主要内容包括:JavaScript语言的基本特性,开发简单的JavaScript程序,JavaScript语法体系,数据、数据类型和变量,运算符和表达式,语句和结构,JavaScript函数, JavaScript对象,...
但很多人却只停在了一些表单验证等基础操作层面上,在面向对象语言大行其道的当下,我们需要去学习javascript的面向对象的知识,以便更好的掌握javascript、为深入理解各种脚本框架打好基础。
接着,深入探讨了浏览器文档对象模型的发展,详细介绍了JavaScript对象的有关知识,包括对象的属性、方法和事件处理程序等内容;最后,细致地讲述了JavaScript核心语言,包括String,Math,Date和Array等核心对象以及...