javascript面向对象程序设计

简介: <p><br></p>        在学习js面向对象编程之前,首先需要知道什么是面向对象。面向对象语言都有类的概念,通过它可以创建具有相同属性和方法的对象。但js并没有类的概念,因此js中的对象和其他语言的对象有所不同。 <p></p> <p>       js对象可以定义为:”无需属性的集合,其属性可以是基本值、对象和函数。每个对象都是基于一个引用类型创建的。</p> <p>


       在学习js面向对象编程之前,首先需要知道什么是面向对象。面向对象语言都有类的概念,通过它可以创建具有相同属性和方法的对象。但js并没有类的概念,因此js中的对象和其他语言的对象有所不同。

       js对象可以定义为:”无需属性的集合,其属性可以是基本值、对象和函数。每个对象都是基于一个引用类型创建的。

       js创建对象有以下两种方法:

       1、创建一个Object实例:

        

var person = new Object();

       2、使用对象字面量:

      

 var person ={};

      3、工厂模式:

    

  function createPerson(name,age,job){
      var p = new Object();
     p.name=name;
     p.age=age;
     p.job=job;
    return p;
    }
   var p1=createPerson("jack",22,“front-end Engineer");
  var p2=.....;

    4.构造函数模式:

    

 function Person(name,age,job){
     this.name=name;
     this.age=age;
    this.job=job;
     this.sayName=function(){alert(this.name);};
     }
    var p1= new Person("jack",22,"front-end Engineer");
   var p2=...;

   这里暂停一下,因为构造函数模式比较重要,这里解释一下:这里实际上是经历了以下4个步骤:

    (1)创建一个对象;

     (2)将构造函数作用域赋给这个对象(所以this将指向这个新创建的对象)

    (3)执行里面的代码,为新对象添加属性;

    (4)返回新对象;

     上面创建的p1和p2都有一个constructor的属性,它指向Person。并且p1和p2即使Person的实例,同时也是Object的实例,因为所有对象都继承自Object。

     缺陷:每个方法都要在实例上重新创建一遍,js中的函数是对象,因此可以将函数转移到构造函数的外部:

    

 function Person(name,age,job){
           this.name=name;
          this.age=age;
          this.job=job;
          this.sayName=sayName;
    }
     fucntion sayName(){
        alert("this.name");
   }
      var p1=.....;
      var p2=....;

     5.原形模式:

     我们创建的函数都有一个prototype属性,它是一个指向一个对象的指针。


     6.抽象函数:

      

Object.extend=function(destination,source){
	for(property in source){
		destination[property]=source[property];
	}
	return destination;
}
//定义一个抽象基类base,无构造函数
function base(){};

base.prototype={
    initialize:function(){
    	this.oninit();//调用了一个虚方法
    }
}
function SubClassA(){
	//构造函数
}
SubClassA.prototype=Object.extend({
	propInSubClassA:"propInSubClassA",
	oninit:function(){
		alert(this.propInSubClassA);
	}
},base.prototype);

function SubClassB(){
	//构造函数
}
SubClassB.prototype=Object.extend({
	propInSubClassB:"propInSubClassB",
	oninit:function(){
		alert(this.propInSubClassB);
	}
},base.prototype);

var objA=new SubClassA();
objA.initialize();//输出"propInSubClassA"

var objB=new SubClassB();
objB.initialize();//输出"propInSubClassB"

相关文章
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(三)
深入JS面向对象(原型-继承)
117 0
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
173 0
js- 面向对象进阶
Object.defineProperty等面向对象的信息
162 0
|
存储 JavaScript 前端开发
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
396 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
存储 JavaScript 算法
JS程序设计的常用套路
亲尝百草,方知甘苦。套路,通常有助于提升代码的可读性、扩展性和效率。以下是作者工作中总结出来的一部分代码套路,分享给大家。
|
前端开发 JavaScript
前端 JS 经典:Class 面向对象
前端 JS 经典:Class 面向对象
129 1
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的程序设计基础视频学习系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的程序设计基础视频学习系统附带文章和源代码部署视频讲解等
121 0
|
JavaScript 前端开发
JavaScript 原型链继承:掌握面向对象的基础
JavaScript 原型链继承:掌握面向对象的基础
|
JavaScript 前端开发 API
在Node.js上使用dojo库进行面向对象web应用开发
请注意,虽然这个例子在Node.js环境中使用了Dojo,但Dojo的许多功能(例如DOM操作和AJAX请求)在Node.js环境中可能无法正常工作。因此,如果你打算在Node.js环境中使用Dojo,你可能需要查找一些适用于服务器端JavaScript的替代方案。
199 0