初识JavaScript的面向对象编程

    学过面向对象编程语言(如C++, Java等)的同学应该都知道这些语言涉及到的概念不外乎是,“类” 、“对象” 、“对象属性” 、“对象方法” 等,然而这些面向对象的概念,在JavaScript目前版本中,没有较为鲜明的对应关系。不过,我们还是可以使用面向对象的方式来进行JavaScript编程滴~

    首先,来说说JavaScript(后面使用JS代称)中的对象吧。在JS中,声明对象的方式有两种:     

var person = {};
var person = new Object();     //  或 var obj = new Object;

    对象声明了,接下来给对象添加属性跟方法,同样有两种表达方式:

    方式1:

var person = {};        // 或者 var obj = new Object();
person.name = "张三";
person.showName = function() {
   console.log(this.name);
};

    方式2:(字面量表达)

var person = {
   name : "张三",
   showName : function() {
       console.log(this.name);
    }
};

    对象有了,对象属性、方法也齐了。感觉还不错!可是,如果需要批量定义对象时,按照上面方式进行的话,那得一遍遍的重复上述代码呀!!oh no ~~~

    让我们想想,是不是应该有办法可以来处理呢?是的,“抽象”,我们可以利用函数的方式来提供创建对象的模板。

function Person(name) {
   this.name = name;
   this.showName = function() {
       console.log(this.name);
   };
}

    通过上述代码,就创建了含有name属性和showName方法的对象模板了。可以通过如下方式进行创建对象:

var person1 = new Person("张三");
person1.showName();    // "张三"var person2 = new Person("李四");person2.showName();    // "李四"

console.log(person1.showName === person2.showName);  //false   showName不共享

    这样就解决了批量创建对象需重复编码的问题啦~

    可是,新的问题又来了。每次创建一个对象,都会产生一个name属性,一个showName方法,其中name属性是根据不同对象而不同的,但是showName方法对于每一个对象都是一样的呀~要是有办法让showName方法共享的话,那不就可以节省内存咯~

    接下来,prototype该登场了,在此可以放实例对象需要共享的属性或者方法。怎么使用?看看下面代码就知道啦~

function Person(name) {
  this.name = name;
}
// 所有创建的对象共享showName方法
Person.prototype.showName = function() {
   console.log(this.name);
}

var person1 = new Person("张三");
person1.showName();
var person2 = new Person("李四");
person2.showName();console.log(person1.showName === person2.showName);   // true , 说明showName共享

    至此,就完成了一个简单的、利用面向对象思想进行编码的JS对象及产生对象的构造函数了。这只是一个简单的入门例子,JS面向对象编程的路还很长,一步一脚印的走......

(本文是作者按照自己的思路写的,如文中描述或理解有误,欢迎指正,谢谢~)

时间: 2024-10-08 00:57:40

初识JavaScript的面向对象编程的相关文章

JavaScript的面向对象编程(OOP)(一)——类

在学习JavaScript面向对象的编程之前,需要知道,并了解面向对象的一些基本的常识.初学者中大多数都以为面向对象中,面向对象的编程是很重要和占据很大一部分精力.笔者在之前也是认为OOP是面向对象的主要部分,那么和我持有一样想法的,下面先要纠正这一想法,真正了解面向对象. 一.初识面向对象 面向对象分为三部分,包括面向对象分析(OOA).面向对象设计(OOD).面向对象的程序设计(OOP). 1.1 OO编程(Object Oriented Analysis) 典型的OO编程过程,应先整理需求

Javascript 进阶 面向对象编程 继承的一个例子

Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承,这篇使用一个例子来展示js如何面向对象编程,以及如何基于类实现继承. 1.利用面向对象的写法,实现下面这个功能,实时更新数据的一个例子: 2.使用对上面类的继承,完成下面的效果: 好了,不多说,js的训练全靠敲,所以如果觉得面向对象不是很扎实,可以照着敲一个,如果觉得很扎实了,提供了效果图,可以自己写试试. 1.第一个效果图代码: [javascript] view pl

javascript的面向对象编程

面象对象编程技术的核心理念:封装.继承.多态:在一些主流的高级编程语言中,比如:C#,VB.NET,JAVA,PHP等都是很容易实现的,而如果要在javascript中实现面象对象编程,可就不那么直接和容易了,因为javascript并不是面向对象的语言,所以我们只能通过javascript的一些特性,比如:闭包.原型链等来模拟出面向对象编程,我认为这些是作为熟练掌握与灵活运用javascript的基础,园子里已有很多的javascript高手对于这方面都有介绍与分析,而我仅以作为一个项目负责人

初识Javascript的面向对象

面向对象编程概念---------------------– 用对象的思想去写代码,就是面向对象编程 过程式写法 面向对象写法 我们一直都在使用对象 数组 Array 时间 Date 面向对象编程(OOP的特点)---------------------- 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 多态:多对象的不同形态 对象的组成----------------------- 方法(行为.操作)--函数:过程.动态的 属性--变量:状态.静态的 工厂方

JavaScript基础-面向对象编程<1>

1.1 函数与对象  1.定义函数的方式定义类 定义类的方法: function class1(){ //类成员的定义及构造函数部分 } class1既是一个函数,也是一个类. 使用 new 操作符获得一个类的实例 new 操作符,不仅对JavaScript的内部对象有效,同样可以用于自定义的类来获取一实例. 例如: 1 var obj1=new class1;//获得class1的实例,即一个对象obj1 使用点格式和方括号格式引用对象的属性和方法 对象名.属性或方法名 对象名.["属性或方法

JavaScript基础-面向对象编程<2>

2.动态添加,修改和删除对象属性和方法 例如:用类Object()创建一个空对象user,然后修改其行为. (1) 添加属性 var user=new Object(); //创建一个没有属性和方法的空对象 user.name="jack"; //添加属性name user.age=21; //添加属性age user.sex="male" 若输出结果,可用alert(user.name)等语句进行显示. (2)添加方法 针对前面的空对象user,添加一个方法 al

javascript 仿面向对象编程实例代码(私有,公共变量。。。)

1 //定义一个javascript类 2 function JsClass(privateParam,publicParam){//构造函数 3 var priMember = privateParam; //私有变量 4 this.pubMember = publicParam; //公共变量 5 //定义私有方法 6 function priMethod(){ 7 return "priMethod()"; 8 } 9 //定义特权方法,特权方法可以访问所有成员 10 this.

JavaScript的面向对象编程(OOP)(三)——聚合

之前写过了类和原型,这里再说聚合,在写关于聚合之前,对与继承我再总结一下.JavaScript中关于继承的方式一共有三种,之前写了两种,但是没有说明,这里补充说明一下. 1.类式继承:通过在函数对象内调用父类的构造函数,使自身获得父类的属性和方法.主要使用callh和apply回调 1 var Person = function(){ 2 this.age = 16; 3 this.sayName = function(){ 4 alert(this.name+this.age); 5 } 6

javascript OOP 面向对象编程

Pseudo-class declaration 原文地址:http://javascript.info/tutorial/pseudo-classical-pattern#pseudo-class-declaration A pseudo-class consists of the constructor function and methods.For example, here’s the Animal pseudo-class with single method sit and two