一：简述

　　

　　当初学编程一看到什么什么模式就比较头晕，不过本文我们通过简单的示例代码来说一下js 对象这个话题 ，来看下如何理解这个原型模式。

二：理解对象

　　　　

　　1.简单对象

　　js对象中没有java、C#等类的概念。但是在js中 一切皆对象嘛 我们可以这么写一个实例

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

 </head>

 <body>

     <script>

         //创建一个对象

         var person = new Object();

         //声明属性

         person.name = 'hello';

         person.age = 29;

         person.job = 'Software Engineer';

         //声明方法

         person.sayName = function () {

             alert(this.name);

         }

     </script>

 </body>

 </html>

是不是很像一个class。但这是早期js创建对象的写法，后来出现了对象字面量的写法 简化了上面的写法

　　2.对象字面量

　　我们来改进上面的写法　　

 var person = {

             //属性

             name: 'hello',

             age: 29,

             job: 'Software Engineer',

             //声明方法

             sayName: function () {

                 alert(this.name);

             }

         }

是不是简化了很多，但是上面两种创建的对象如果创建多了会产生大量重复代码 ，所以也就出现了以下第三种模式（又是模式....）

　　

　　3.工厂模式

　　

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

 </head>

 <body>

     <script>

         //用函数来包装

         function createPerson() {

             var person = new Object();

             //声明属性

             person.name = 'hello';

             person.age = 29;

             person.job = 'Software Engineer';

             //声明方法

             person.sayName = function () {

                 alert(this.name);

             }

             return person;

         }

         //调用

         var person1 = createPerson('tom', 21, 'baidu');

         var person2 = createPerson('tony', 31, 'tencent');

     </script>

 </body>

 </html>

工厂就是把东西加工、包装成一个对象。 其实我们大多数的写法也就是这么个模式 。但是这样我们怎么知道这个对象的类型呢 ？随着js发展又出来一个新模式

　　

　　4.构造函数模式

　　

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

 </head>

 <body>

     <script>

         function Person(name,age,job) {

             this.name = name;

             this.age = age;

             this.job = job;

             this.sayName = function () {

                 alert(this.name);

             }

         }

         var pserson1 = new Person('tom', 21, 'baidu');

         var pserson2= new Person('tony', 31, 'tencent');

     </script>

 </body>

 </html>

　　看着是不是跟对象字面量很像。这个模式跟工厂模式对比来看

　　　　a.没有显示的创建对象

　　　　b.直接将属性和方法赋值给了this对象

　　　　c.没有return

　　　　d.执行构造函数中的代码（在Person新对象中添加属性和方法）

　

  console.info(person1.constructor == Person);//true

  console.info(person1.constructor == Person);//true

　　对象的constructor属性 是用来标识对象类型的 ，可以将他的实例标识为一种特定的类型

　　说说这个特殊的函数--构造函数 ，它跟函数的唯一区别就是调用的方式不同（有啥不同啊。。）

　　只要是能通过new操作符来调用的函数就可以作为构造函数。（没new的就是普通函数呗O(∩_∩)O）

　　

 //我是构造函数

  var pserson1 = new Person('tom', 21, 'baidu');

  //我是普通函数

  person('tony', 31, 'tencent');

构造函数模式也有自己的问题。每个方法都要在每个实例上重新创建一遍。

构造函数的另一种定义：　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <script>

        function Person(name,age,job) {

            this.name = name;

            this.age = age;

            this.job = job;

            //第一种写法

            this.sayName = function () {

                alert(this.name);

            }

            //第二种写法

            this.sayName = new Function("alert(this.name)")

        }

    </script>

</body>

</html>

这样就可以看出person1.sayName 不等于person2.sayName了  因为不同实例的同名函数是不相等的

但是我们可以这么写：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <script>

        function Person(name,age,job) {

            this.name = name;

            this.age = age;

            this.job = job;

            this.sayName = sayName

        }

        function sayName() {

            alert(this.name);

        }

    </script>

</body>

</html>

但是这样虽然是函数指向相同了  但是方法多了 就没有封装性可言了 。

　　

　　5.原型模式

　　我们每个函数都有一个prototype（原型）属性。它是构造函数中（就是new的函数）自动创建的对象实例的原型对象 （就是一new就有了）

好处：可以让所有对象实例共享它包含的属性和方法（可以直接添）如下

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <script>

        //声明一个空函数（首字母大写）

        function Person() {

        }
　　　　 //添加属性和方法

        Person.prototype.name = "tony";

        Person.prototype.age=29;

        Person.prototype.job = 'baidu';

        Person.prototype.sayName = function () {

            alert(this.name);

        }

        var person1 = new Person();

        person1.sayName();//baidu

        var person2 = new Person();

        person2.sayName();//baidu

        alert(person1.sayName == person2.sayName);//true

    </script>

</body>

</html>

因为新对象的属性和方法都是共享的，所以person1和person2都是访问的同一个sayName函数

　　a.理解原型对象：

　　上面说到只要创建一个函数就会自动创建一个prototype属性，这个属性指向的就是函数的原型对象

　　Person.prototype.constructor就是Person

　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <script>

        //声明一个函数（首字母大写）

        function Person() {

        }

        Person.prototype.name = "tony";

        Person.prototype.age=29;

        Person.prototype.job = 'baidu';

        Person.prototype.sayName = function () {

            alert(this.name);

        }

        var person1 = new Person();

        console.info(person1);

    </script>

</body>

</html>

chrome中打印输出结构：

　　

虽然person1不包含任何属性和方法 ，但是我们可以使用person1.sayName() 这就是通过查找对象属性来实现的

person1就是实例 Person就是原型 当实例中的属性修改后

person1.name='1234' 不影响实例的属性 person2没修改 name还是tony

delete person1.name;

这个可以删除person1的实例属性 从而访问到原型中的值

　　（1）我们可以通过hasOwnProperty方法来判断本身是否有这个属性（就是判断自己有没有该属性 返回true、false）　　

   <script>

         //声明一个函数（首字母大写）

         function Person() {

         }

         Person.prototype.name = "tony";

         Person.prototype.age=29;

         Person.prototype.job = 'baidu';

         Person.prototype.sayName = function () {

             alert(this.name);

         }

         var person1 = new Person();

         alert(person1.hasOwnProperty('name'));//false

         person1.name = '123';//我自己重新赋值  有了该属性

         alert(person1.hasOwnProperty('name'));//true

         console.info(person1);

     </script>

　　（2）通过 in操作符来判断（单独使用和在for循环中）

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

 </head>

 <body>

     <script>

         //声明一个函数（首字母大写）

         function Person() {

         }

         Person.prototype.name = "tony";

         Person.prototype.age=29;

         Person.prototype.job = 'baidu';

         Person.prototype.sayName = function () {

             alert(this.name);

         }

         var person1 = new Person();

         alert(person1.hasOwnProperty('name'));//false

         alert('name' in person1) //true

         person1.name = '123';//我自己重新赋值  有了该属性

         alert(person1.hasOwnProperty('name'));//true

         alert('name' in person1) //true

     </script>

 </body>

 </html>

可以看到in可以访问到原型中去查找也就返回了都是true  而hasOwnProperty只在本身查找

　　（3）我只想看是否在原型中的属性 使用hasPrototypeProperty (在原型中不在实例中的属性)

　　（4）像in的用法在ie等浏览器中是有bug的 所以es5提供了 Object.keys() 方法来获取所有枚举属性

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <script>

        //声明一个函数（首字母大写）

        function Person() {

        }

        Person.prototype.name = "tony";

        Person.prototype.age=29;

        Person.prototype.job = 'baidu';

        Person.prototype.sayName = function () {

            alert(this.name);

        }

        var keys = Object.keys(Person.prototype);

        alert(keys);//name,age,job,sayName

        var person1 = new Person();

        person1.name = '123';//我自己重新赋值  有了该属性

        var keys2 = Object.keys(person1.prototype);

        alert(keys2);//name

    </script>

</body>

</html>

上面原型写法完全可以用对象字面量的形势简写（注意字面量写法中的红字）

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <script>

        //声明一个函数（首字母大写）

        function Person() {

        }

        Person.prototype = {
　　　　　　　constructor:Person,//修正构造函数重新指向自己

            name: "tony",

            age: 29,

            job: 'baidu',

            sayName: function () {

                alert(this.name);

            }

        }

        //Person.prototype.name = "tony";

        //Person.prototype.age=29;

        //Person.prototype.job = 'baidu';

        //Person.prototype.sayName = function () {

        //    alert(this.name);

        //}

    </script>

</body>

</html>

　　

原型模式最大的问题是共享的本性导致的 。里面包含引用类型比如数组 也会跟着共享

所以原型模式一般不会单独出现

　 6.组合使用构造函数模式和原型模式

　　构造函数模式用来定义实例属性

　　原型模式用来定义方法和共享的属性

　　这种混合模式是目前es中使用最广泛和认同度最高的一种自定义类型的方法  这也是引用类型的一种默认方式

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <script>

        //声明一个函数（首字母大写）

        function Person(name, age, job) {

            this.name = name;

            this.age = age;

            this.job = job;

            this.friends = ["lili","tonk"];

        }

        Person.prototype = {

            constructor: Person,

            sayName: function () {

                alert(this.name);

            }

        }

        var person1 = createPerson('tom', 21, 'baidu');

        var person2 = createPerson('tony', 31, 'tencent');

        person1.friends.push('van');

        console.info(person1.friends);//lili、tonk、van

        console.info(person2.friends);//lili、tonk

        console.info(person1.friends == person2.friends);//false

        console.info(person1.sayName == person2.sayName);//true

    </script>

</body>

</html>

　　

JavaScript原型模式-理解对象的更多相关文章

  1. javascript原型模式理解

    传统的面向对象语言中,创建一个对象是通过使用类来创建一个对象的,比如通过类飞行器来创建一个对象,飞机. 而js这种没有类概念的动态设计语言中,创建对象是通过函数来创建的,所以通常也把js称为函数式语言 ...

  2. 面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统

    面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...

  3. Javascript原型模式总结梳理

    在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编 ...

  4. JavaScript原型模式

    一.提到原型模式,和构造函数关系密切,先讲一下它 javascript没有类,通过函数来模拟实现类,用new来创建对象,函数内部的this指针来指向调用它的对象. 事例中创建对象myGril,这个对象 ...

  5. Javascript:原型模式类继承

    原型模式 每个函数(准确说不是类.对象)都有一个prototype属性,这个属性是一个指针,指向一个对象. 使用原型对象的好处是可以让所有对象实例共享它包含的属性和方法.   1.原型对象 (1)当创 ...

  6. 通过JavaScript原型链理解基于原型的编程

    零.此文动机 用了一段时间的Lua,用惯了Java C++等有Class关键字的语言,一直对Lua的中的面向对象技术感到费解,一个开源的objectlua更是看了n遍也没理解其中的原理,直到看到了Pr ...

  7. JavaScript原型模式（prototype）

    1.原型是一个对象,其他对象可以通过它实现属性的继承所有对象在默认的情况下都有一个原型,因为原型的本身也是对象,所以一个类的真正原型是被类的内部[prototype]属性所指出.每个函数都有一个属性叫 ...

  8. JavaScript 面向对象编程 · 理解对象

    前言:      在我们深入 面向对象编程之前 ,让我们先理解一下Javascript的 对象(Object),我们可以把ECMAScript对象想象成散列表,其值无非就是一组名值对,其中值可以是数据 ...

  9. 关于JavaScript 原型的理解

    原型的含义是指:如果构造器有个原型对象A,则由该构造器创建的实例(Object Instance)都必然复制于A.““在JavaScript中,对象实例(Object Instance)并没有原型,而 ...

随机推荐

  1. 蓝桥网试题 java 基础练习 字母图形

    ----------------------------------------------------------------- 不知道说啥 感觉好像偏离主体思想了 但是这样写好简单 ------- ...

  2. 一个想法（续四）：IT技术联盟创业众筹进度公示

    为了将整个创业过程更加的公开公正透明化,特开此篇用于展示众筹进度. 首轮众筹进度如下:(每天24点更新1次)

  3. Swift2.0 函数学习笔记

    最近又有点忙,忙着找工作,忙着适应这个新环境.现在好了,上班两周周了,也适应过来了,又有时间安安静静的就行我们前面的学习了.今天这篇笔记,记录的就是函数的使用.下面这些代码基本上是理清楚了函数的额使用 ...

  4. swift 运算符快速学习（建议懂ＯＣ或者Ｃ语言的伙伴学习参考）

    昨晚看了swift 的运算符的知识点,先大概说一下,这个点和 c 或者oc 的算运符知识点一样,都是最基础最基础的.其他的最基本的加减乘除就不多说了.注意的有几点点..先说求余数运算: 一 :求余数运 ...

  5. swift 可选类型笔记

    晚上十一点半了,看书累了,原本想睡了的,想了想,还是把刚看的总结一下,把这篇笔记写了吧.广州下雨,真特么的冷..好了,废话不说了,说正题说说Swift可选类型. 先定义一个变量: var string ...

  6. JavaScript中几个相似方法对比

    一.substring与substr   substring substr 概述 返回字符串两个索引之间(或到字符串末尾)的子串 返回字符串从指定位置开始到指定长度的子串 语法 参数 indexSta ...

  7. 酷派8702手机打开logcat

    机器在出厂时将log的级别做了限制,方法是:拨号盘输入*20121220# -> 选择日志输出级别 -> 选择Java log level -> 选择LOGD即可.

  8. Java之路——敬JAVA初学者（作者：MoMo）

    作为一名大四的毕业生,大学三年过,有得有失.作为一个喜欢编程,喜欢JAVA的人,自学其实是一件美事,很有意思的事.要是能再找个女朋友一起学.嘿嘿,就不枉在大学走了一遭啊!    要离开学校了,还是想留 ...

  9. jQuery ajax() 参数,回调函数，数据类型，发送数据到服务器，高级选项

    $.ajax({ options:/*类型:Object;  可选.AJAX 请求设置.所有选项都是可选的.*/ async:/*类型:Boolean; 默认值: true.默认设置下,所有请求均为异 ...

  10. SaberRD之蒙特卡罗分析（一）

    [声明]本博文的大部分内容摘录于网络,本人按照自己的思维习惯和文字风格进行了重新整理以便于理解和记忆. 鉴于篇幅,我打算先对蒙特卡罗分析的基本思想和历史渊源做一下简单的梳理,然后在下一篇博文中介绍Sa ...