javascript创建对象的几种方式

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用JSON;方法很多,也能混合使用。

在javascrit中,万物皆对象,这主要是体验一种设计思路;

那么创建对象是 任何编程语言的重点和需要要点;

在合适的时候使用适合的方式,并且考虑以后的扩展,这样可以让你以后的代码更加的效率;

这篇文章是从网上看到的,然后自己整理一些;

随着web 2.0 的兴起(最具代表性的是Ajax技术了),javascript不再是程序员眼中的“玩具语言”。 编程在不断的简化,可是“用户体验、性能、兼容性、可扩展……”要求却在不断提高,随之涌现出Prototype、jQuery、ExtJs、Dojo等优秀的框架(类库),大大简化了web开发。

越来越多的人开始深入研究和使用javascript,当然,企业对开发者的要求也越来越高。就拿自己的经历来讲,零几年的时候,我能拿javascript写一些页面UI效果,做网站的表单验证等操作,当时觉得已经很酷了。但是换到现在,如果连XMLHttpRequest、JSON是什么都不知道,连javascript中的面向对象/基于对象编程都不了解,还敢称自己是优秀的web程序员吗?(关注前沿技术的朋友,一定了解node.js、MongoDB,这都离不开javascript。)

javascript的灵活性,让人又爱又恨。典型的入门简单,精通很难。理解javascript OOP/基于对象的编程,是判断程序员javascript水平的分水岭。而javascript 基于对象编程中,最基本的是“创建对象”,往往让很多熟悉其他面向语言(Java、C#、C++)的程序员觉得似懂非懂或者难以适应。所以,本文首先将向大家介绍,javascript 中常见的创建对象的几种方式。

对象字面量的方式

var person={
    name:"SF",
    age:25
    say:function(){
       alert(this.name+"今年"+this.age);
    }
};
person.say();

比如下面的

var Cat  = {};//JSON
Cat.name="kity";//添加属性并赋值
Cat.age=2;
Cat.sayHello=function(){
alert("hello "+Cat.name+",今年"+Cat["age"]+"岁了");//可以使用“.”的方式访问属性,也可以使用HashMap的方式访问
}
Cat.sayHello();//调用对象的(方法)函数

字面量方式我们在写js代码的过程中最常用也是最容易理解的一种方式;

如果有函数也是挂载这个对象上面的。如果在person.say运行的时候,可以使用person.xxx 也可以使用this.xxx去调用;当然这里的this你要保证是在指向persdon的,或者你用self/that/_this   这种对象去保存,否则可能会导致this关键字指向混乱的问题;

创建Object实例

var my = new Object();
my.name = "SF"; //JavaScript的发明者
my.age = 25;
my.say = function() { 
  alert("我是"+this.name+"今年"+my.age);
}
my.say();

*属性是可以动态添加,修改的;

重点:创建一个对象,相当于new一个类的实例

下面也是同样的方法

function Person(){
}
var personOne=new Person();//定义一个function,如果有new关键字去"实例化",那么该function可以看作是一个类
personOne.name="dylan";
personOne.hobby="coding";
personOne.work=function(){
alert(personOne.name+" is coding now...");
}
personOne.work();

这种方式一般用来做封装类库,new的同时,一般为了方面会封装成代opyions的new;

比如可以使用

var options={a:”1″,b:”222″}

var temp=new testFun(options)

构造函数

可以使用有参构造函数来实现,这样定义更方便,扩展性更强(推荐使用)

无参构造函数

function Person(){}
var person = new Person(); 
person.name = "SF";
person.age = "25";
person.say = function() {
   alert("My name is " + person.name);
}
person.say();

有参构造函数

function Person(name,age) { 
  this.name = name; 
  this.age = age; 
  this.say = function() { 
      alert("我叫" + this.name + ",今年" + this.age + "岁); 
  }
}
var my = new Person("SF",25); //实例化、创建对象
my.say(); //调用say()方法

下面也是

function Pet(name,age,hobby){
this.name=name;//this作用域:当前对象
this.age=age;
this.hobby=hobby;
this.eat=function(){
alert("我叫"+this.name+",我喜欢"+this.hobby+",也是个吃货");
}
}
var maidou =new Pet("麦兜",5,"睡觉");//实例化/创建对象
maidou.eat();//调用eat方法(函数)

由于this指针在对象实例的时候发生改变指向新的实例。这时新实例的方法也要重新创建,如果n个实例就要n次重建相同的方法。

构造函数的典型标志就是使用this关键字的;

工厂模式

function creatPerson(name,age){
   var person = new Object();
   person.name=name;
   person.age=age;
   person.say=function(){
   alert(this.name+"今年"+this.age+"岁");
  };
  return person;
 };
 var my = creatPerson('SF',25);//实例化
 my.say();//调用
var wcDog =new Object();
wcDog.name="旺财";
wcDog.age=3;
wcDog.work=function(){
alert("我是"+wcDog.name+",汪汪汪......");
}
wcDog.work();

工厂模式有一个缺点就是定时扩展并不是很好;

像一个毛衣加工厂一样,你可以定制毛衣的品牌/大小等,但是除了你定制的这些,其他都是一样的;千篇一律,没有体验程序的定制性;

原型方式: prototype关键字 是重点

function Person(name,age){}
Person.prototype.name = "SF";
Person.prototype.age = 25;
Person.prototype.say = function() { 
  alert(this.name+"是我的名字");
}
var my = new Person();
my.say();
function Dog(){}
Dog.prototype.name="旺财";
Dog.prototype.eat=function(){
alert(this.name+"是个吃货");
}
var wangcai =new Dog();
wangcai.eat();
让我们先了解下原型:

首先,每个函数都有一个prototype(原型)属性,这个指针指向的就是Person.prototype对象。而这个原型对象在默认的时候有一个属性constructor,指向Person,这个属性可读可写。

注意:如果你重写了对象的原型,那么为了规范,非常推荐你把constructor指回原来的对象;否则重写后的constructor就指向object这个基础类了

而当我们在实例化一个对象的时候,实例my除了具有构造函数定义的属性和方法外(注意,只是构造函数中的),还有一个指向构造函数的原型的指针,ECMAScript中叫[[prototype]],这样实例化对象的时候,原型对象的方法并没有在某个具体的实例中,因为原型没有被实例。所以这种模式定义的对象,在调用方法的时候过程:调用my.say();先看实例中有没有,有调之,无追踪到原型,有调之,无出错,调用失败。

function Person(name,age){}
Person.prototype={
    constructor:Person,   //必须手动设置这个属性,否则没有实例共享原型的意义了。
    name:"SF",
    age:25,
    say:function(){
        alert(this.name+"是我的名字");
    }
}
var my = new Person();
my.say();

基础的对象创建方式,就是5种,其他的都是为了业务的应用场景而做的混合创建;

比如下面的;

混合方式 (构造函数+原型)

function Person(name,age) {
   this.name = name;
   this.age = age;
}
Person.prototype.say = function() { 
  alert("我是"+this.name+",今年"+this.age);
}
var my = new Person("SF","25");
my.say();
function Car(name,price){
this.name=name;
this.price=price;
}
Car.prototype.sell=function(){
alert("我是"+this.name+",我现在卖"+this.price+"万元");
}
var camry =new Car("凯美瑞",27);
camry.sell();

或者也可以让a继承b的类,如果b有和a相同的方法,则a覆盖b等,可以想想怎么去创建,都是上面几种的搭配;

动态原型的方式(可以看作是混合模式的一种特例)

function Car(name,price){
this.name=name;
this.price=price;
if(typeof Car.sell=="undefined"){
Car.prototype.sell=function(){
alert("我是"+this.name+",我现在卖"+this.price+"万元");
}
Car.sell=true;
}
}
var camry =new Car("凯美瑞",27);
camry.sell();

以上几种,是javascript中最常用的创建对象的方式。

初学者看到后,可能会晕掉,甚至会觉得担心。

其实完全不用担心,这些种方式,只需要掌握一两种,对其他的几种只需要理解就好了。

这正是javascript的灵活性。每种方式必定都有其优缺点,因此没有固定的推荐,选择自己最容易理解和掌握的方式即可。

况且,每个人的代码风格可能都不同。将来你可能需要去研究jQuery的源码,或者参照别的插件去改写、去开发属于自己的插件,都需要去理解别人的代码风格。

而这些类库、插件,都是建立在面向对象/基于对象的基础之上的。

~~~

未经允许不得转载:WEB前端开发 » javascript创建对象的几种方式

赞 (0)