《javascript设计模式》学习笔记一：创建javascript对象的三种方式

谁践踏了优雅 2024-02-18 14:45 7阅读 0赞

《javascript设计模式》学习笔记一：创建javascript对象的三种方式

前 天刚入手《javascript设计模式》这本书，猛读了一下，颇有感悟，对javascript面向对象的写法有了进一步的了解，也解答了以前困惑良久的问题，萌发了写笔记的想法，想把这本书的精华分享给想要了解javascript设计模式的朋友们。

一、三种创建对象的方式

书上有个例子：启动和停止一个动画，一般面向过程的写法如下：

function startAnimation()\{

\}

function stopAnimation()\{

\}

现在把它改写成一个对象

第一种方式：

var Anim = function()\{

\};

Anim.prototype.start = function()\{

\};

Anim.prototype.stop = function()\{

\};

//实例化对象

var myAnim = new Anim();

myAnim.start();

myAnim.stop();

第二种方式：（偶使用的就是这种方式）

var Anim = function()\{

\};

Anim.prototype = \{

start : function()\{

\},

stop : function()\{

\}

\};

第三种方式：

Function.prototype.method = function(name,fn)\{

this.prototype\[name\] = fn;

\}

var Anim = function()\{

\};

Anim.method('start',function()\{

\});

Anim.method('stop',function()\{

\});

关于prototype原型的解释，我最早接触的是《javascript高级程序设计》里面的说法，但个人觉得还是太简单了，不是很好理解，百度百科里面找到了关于原型的说明，附上网址：

[baike.baidu.com/view/1217697.htm][baike.baidu.com_view_1217697.htm]

现在来看看三种方式的优缺点：

第一种方式：将二个方法赋予该类的prototype属性（之所以将类的方法放在prototype属性，是为了避免重复创建函数，要使用prototype属性，必须实例化类）,但写法上有点繁琐，而且不是很符合一般类的书写习惯，于是就有了第二种方式的改进版。

第二种方式：强烈推荐这种方式，代码简练，清晰，如果有使用过JQ的话，应该会注意到JQ插件的写法就是这种方式。

第三种方式：我还没有使用过，不敢妄下定论，有兴趣的朋友可以用用看看。（这种方式的优势在于链式调用）。

[baike.baidu.com_view_1217697.htm]: http://baike.baidu.com/view/1217697.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关《javascript设计模式》学习笔记一：创建javascript对象的三种方式

《javascript设计模式》学习笔记一：创建javascript对象的三种方式前天刚入手《javascript设计模式》这本书，猛读了一下，颇有感悟，对java

谁践踏了优雅/ 2024年02月18日 14:45/ 0 赞/ 8 阅读

相关 JavaScript创建对象的几种方式

/ 创建对象方式一，直接通过大括号创建 / var Student1 = {}; Student1.name ="张三";

谁借莪１个温暖的怀抱￠/ 2022年08月01日 14:48/ 0 赞/ 266 阅读

相关 JavaScript创建对象的四种方式

一. 使用Object创建一个新的对象 1>定义一个新的对象 var student1 = new Object() var student1 = ne

雨点打透心脏的1/2处/ 2022年07月13日 10:49/ 0 赞/ 170 阅读

相关 JavaScript创建对象的三种方式

第一种方法： <script type="text/javascript"> //创建一个新的对象 var obj = new Object();

小鱼儿/ 2022年07月13日 05:20/ 0 赞/ 188 阅读

相关 JavaScript创建对象的几种模式

前言 -------------------- > 对象字面量以及Object构造函数均可以创建单个对象，但是这样的方式有一个致命缺点，会产生大量的重复代码，为了解决这

怼烎@/ 2022年06月08日 03:54/ 0 赞/ 196 阅读

相关 javascript对象的几种创建方式

1、通过Object构造函数或对象字面量创建单个对象　　这些方式有明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。为了解决这个问题，出现了工厂模式。 2

约定不等于承诺〃/ 2022年05月19日 10:11/ 0 赞/ 225 阅读

相关 JavaScript创建对象的几种方式

JavaScript创建对象的几种方式 1. 2. 通过字面量的方式创建对象 var obj{ name:"张学友", j

谁践踏了优雅/ 2022年05月14日 02:29/ 0 赞/ 258 阅读

相关 JavaScript对象的几种创建方式?

\\\` > JavaScript对象的几种创建方式? \`\\ ![clipboard.png][] ![clipboard.png][clipboard.png 1

清疚/ 2022年03月07日 07:24/ 0 赞/ 349 阅读

相关必知!JavaScript创建对象的三种方式

方式1：调用系统的构造函数创建对象表达式: var 变量名= new Object(); 例子： //实例化对象,创建对象 var

喜欢ヅ旅行/ 2021年11月18日 01:31/ 0 赞/ 293 阅读

相关 JavaScript创建元素的三种方式

第一种：document.write(“标签的代码及内容”)； document.write('新设置的内容<p>标签也可以生成</p>'); 该方法的缺陷：如

亦凉/ 2021年11月11日 09:46/ 0 赞/ 318 阅读