JavaScript中prototype原型与面向对象编程详解

作者:纸飞机

时间:2026-10-27

浏览:167

本文深入解析JavaScript中prototype原型的使用机制,涵盖对象方法属性的动态添加、静态成员的定义与访问限制。通过具体代码示例演示子类继承父类的语法实现,以及如何重写父类属性和方法。同时介绍对象字面量的定义方式,帮助开发者掌握JS面向对象的核心技巧。

代码如下:

<script language="javascript" type="text/javascript">
原型方法与静态成员定义//(1)将一个函数转换为对象,并为该对象定义方法和属性
var Name = function () {
//利用prototype为对象添加方法
Name.prototype.Add = function (num, title) {
             }
//也可以直接使用this加上方法名来为对象创建方法,这与上述方式等价
this.Way = function (str) {
             }
//为对象实例添加属性值
Name.prototype.xing = "123";
//定义静态属性和方法
Name.shi = "static";
Name.Addd = function (num, title) {
             }
//静态定义的局部属性和方法仅在静态类型内部可用
alert(Name.shi);
Name.Addd(1, 2);
         }
//方法也可以采用以下声明方式
function Name1() {
Name1.prototype.add = function () { }
this.way = function () { }
Name1.prototype.shu = "other";
         }
//静态定义的全局属性和方法具有通用性
Name.sha = "static";
Name.Addd2 = function () {
         }
alert(Name.sha); //调用静态属性
Name.Addd2(); //调用静态方法
var name = new Name();
name.Add(); //对象调用方法
name.Way();
alert(name.xing); //对象调用属性
/*静态的全局变量在方法外部可以调用;静态的局部变量和方法仅限于方法内部使用;实例对象无法调用静态方法*/
/*实例对象不能直接使用prototype; */
 
对象继承与重写机制//(2)JavaScript面向对象 继承
//父类定义
function Class() {
this.name = "name";
this.method = function () {
alert("method");
             }
         }
//子类定义
function Class1() {
this.name1 = "name1";
this.method1 = function () {
alert("method1");
             }
         }
//子类继承父类
Class1.prototype = new Class();
var obj = new Class1();
alert(obj.name);
alert(obj.name1);
obj.method();
obj.method1();
/****** 子类继承父类的语法格式:子类.prototype = new 父类(); *****/
//(3)子类重写父类成员
//子类定义
function Class2() {
this.name2 = "name2";
this.method2 = function () {
alert("method2");
             }
         }
Class2.prototype = new Class(); //继承父类
Class2.prototype.name = "updateName"; //重写父类属性
Class2.prototype.method = function () {//重写父类方法
alert("UpdateMethod");
         }
var obj2 = new Class2();
alert(obj2.name); //显示updateName
obj2.method(); //显示UpdateMethod
alert(obj2.name2);
obj2.method2();
对象字面量定义//(4)大括号{}内部定义为对象
var arr = new Array();
arr.push({ "name": "1", "age": 12, funA: function () { } });
arr.push({ "name": "2", "age": 13 });
arr.push({ "name": "3", "age": 14 });
for (var i = 0; i < arr.length; i++) {
alert(arr[i].name);
alert(arr[i].age);
alert(arr[i].funA());
         }
/****对象也可以通过字面量方式定义***/
var newObject = {
"name": "Jim",
"sex": "Man",
Way: function () { }
         };
</script>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章