js中的面向对象之对象常见创建方法详解

所属分类: 网络编程 / JavaScript 阅读数: 1000
收藏 0 赞 0 分享

本文实例讲述了js中的面向对象之对象常见创建方法。分享给大家供大家参考,具体如下:

创建对象的几种常用方式

1.使用Object或对象字面量创建对象

2.工厂模式创建对象

3.构造函数模式创建对象

4.原型模式创建对象

1.使用Object或对象字面量创建对象

使用object

var student = new Object();
student.name = "easy";
student.age = "20";

使用字面量

var sutdent = {
 name : "easy",
 age : 20
};

2.工厂模式创建对象

function createStudent(name, age) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 return obj;
}
var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);

3.构造函数模式创建对象

在上面创建Object这样的原生对象的时候,我们就使用过其构造函数

var obj = new Object();

在创建原生数组Array类型对象时也使用过其构造函数:

var arr = new Array(10); //构造一个初始长度为10的数组对象

我们首先了解一下构造函数和普通函数有什么区别。

1、实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法。对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数。

2、按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者。例如上面的new Array(),new Object()。

3、使用new操作符调用构造函数时,会经历(1)创建一个新对象;(2)将构造函数作用域赋给新对象(使this指向该新对象);(3)执行构造函数代码;(4)返回新对象;4个阶段。

ok,了解了构造函数和普通函数的区别之后,我们使用构造函数将工厂模式的函数重写,并添加一个方法属性:

function Student(name, age) {
 this.name = name;
 this.age = age;
 this.alertName = function(){
  alert(this.name)
 };
}
function Fruit(name, color) {
 this.name = name;
 this.color = color;
 this.alertName = function(){
  alert(this.name)
 };
}

这样我们再分别创建Student和Fruit的对象

var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");

这时我们再来用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了:

alert(v1 instanceof Student); //true
alert(v2 instanceof Student); //false
alert(v1 instanceof Fruit); //false
alert(v2 instanceof Fruit); //true
alert(v1 instanceof Object); //true 任何对象均继承自Object
alert(v2 instanceof Object); //true 任何对象均继承自Object

可以将上面的函数简化:Student和Fruit对象中共有同样的方法移到构造函数外部

function Student(name, age) {
 this.name = name;
 this.age = age;
}
function Fruit(name, color) {
 this.name = name;
 this.color = color;
};
function alertName() {
 alert(this.name);
}

我们通过将alertName()函数定义为全局函数,这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数,解决了内存浪费的问题

但是,通过全局函数的方式解决对象内部共享的问题,终究不像一个好的解决方法。如果这样定义的全局函数多了,我们想要将自定义对象封装的初衷便几乎无法实现了。

更好的方案是通过原型对象模式来解决。

4.原型的模式创建对象

原型链甚至原型继承,是整个JS中最难的一部分也是最不好理解的一部分,在这里由于我们课程定位的原因,如果对js有兴趣的同学,可以去查阅一下相关JS原型的一些知识点。

function Student() {
  this.name = 'easy';
  this.age = 20;
}
Student.prototype.alertName = function(){
  alert(this.name);
};
var stu1 = new Student();
var stu2 = new Student();
stu1.alertName(); //easy
stu2.alertName(); //easy
alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

更多精彩内容其他人还在看

js单独获取一个checkbox看其是否被选中

这篇文章主要与大家分享js获取一个checkbox看其是否被选中的具体实现,很简单,但很实用,需要的朋友可以参考下
收藏 0 赞 0 分享

js变量、作用域及内存详解

本文主要详细分析了JS变量,作用域以及内存问题,同时附上非常多的实例,方便大家理解这3个概念,是篇不可多得的文章,希望对大家有所帮助
收藏 0 赞 0 分享

深入理解javascript作用域和闭包

作用域和作用域链是javascript中非常重要的特性,对于他们的理解直接关系到对于整个javascript体系的理解,而闭包又是对作用域的延伸,也是在实际开发中经常使用的一个特性,实际上,不仅仅是javascript,在很多语言中都提供了闭包的特性。
收藏 0 赞 0 分享

IE6 hack for js 集锦

本文主要讲诉了使用js实现网站功能兼容IE6,非常的实用的小技巧,有需要的朋友可以参考下
收藏 0 赞 0 分享

Javascript的setTimeout()使用闭包特性时需要注意的问题

这篇文章主要介绍了Javascript的setTimeout(0)使用闭包特性时需要注意的问题,需要的朋友可以参考下
收藏 0 赞 0 分享

常用的jquery模板插件——jQuery Boilerplate介绍

Query Boilerplate是一个不错的jQuery插件开发工具,使用这个工具可以帮助你快速的构建一个jQuery框架。这个工具提供你很多评论用以帮助你使得开发变得简单和直接,它是个真正的面对对象的工具,你可以实现公开或者私有的方法或者公开或者私有的属性。
收藏 0 赞 0 分享

深入理解javascript构造函数和原型对象

对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅。。(哔!)。
收藏 0 赞 0 分享

深入理解javascript原型链和继承

这篇文章主要介绍了javascript原型链和继承的概念,以及使用原型链实现继承、经典继承、组合式继承、寄生组合式继承。非常实用,是篇非常不错的文章,这里推荐给大家。
收藏 0 赞 0 分享

再探JavaScript作用域

这篇文章主要介绍了再探JavaScript作用域,本文用简洁的语言和直观的测试结果图片给大家讲解JavaScript的作用域,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript获取图片真实大小代码实例

这篇文章主要介绍了JavaScript获取图片真实大小代码实例,本文使用onload事件来获取图片的真实大小,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多