js面向对象4--原型模式的不足以及顶级模式的出现

最新推荐文章于 2018-08-23 10:17:36 发布

iteye_16498

最新推荐文章于 2018-08-23 10:17:36 发布

阅读量180

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 构造模式+原型模式 ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_16498/article/details/82615357

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

<%@ page language="java" contentType="text/html;
charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>

<script type="text/javascript">

    /*
      JavaScript原型模式已经带来的弊端以及这个弊端的解决办法：
              一句话概述弊端： 原型对象中的引用类型因为共享，修改了就修改了全部实例。
              而又的时候我们仅仅是想每个实例有每个实例的引用类型，所以就出现了问题。

               原型模式也并不是没有缺点的，首先，它省略了为构造函数传递参数的这一环节，
               结果所有实例在默认情况下将取得所有相同的属性值，虽然这会在某种程度上
               带来一些不方便，但还不是原型的最大的问题，原型模式的最大问题是由其共享
               的本性所导致的。
               原型中所有属性是被实例共享的，这种共享对于函数非常适合，对于那些包含基本值的属性
               倒也说得过去，毕竟，通过在实例上添加一个同名属性，可以隐蔽原型中的对应属性。然而
               ，对于包含引用类型值得属性来说，问题就比较突出了，来看如下例子：
    */
    function Person(){}
    Person.prototype = {
    		constructor:Person, //应该知道这种写法带来的问题，已经过，不在赘述
    		name : "chenchaoyang",
    		age:12,
    		job : "Software enginner",
    		friends :["何胜男","何凯"],
    		sayName : function(){
    			console.log(this.name);
    		}
    }

    function onloadFunction(){
    	var person1 = new Person();
    	var person2 = new Person();

    	person1.friends.push("张三");

    	person1.friends = ["3333","34444"];

    	alert(person1.friends);   //何胜男,何凯,张三
    	alert(person2.friends);   //何胜男,何凯,张三
    	alert(person1.friends == person2.friends);  //true
    }

    /*
        因为friends属性存在于Person的prototype对象中，所以修改了person1
        的friends属性，person2的friends同样就行了修改，因为他们是共享了一个
        friends属性，假如我们的初衷就是像这样在所有实例中共享一个数组，那么
        对这个结果我没有话可说，可是，实例一般都是要有属于自己的全部属性的，而这个
        问题正是我们很少看到有人单独使用原型模式的原因所在。
        于是一个我们比较常见的，最实用的使用的模式出现了，这个模式也是我们的顶级模式：
    */

    /*
       创建自定义类型的最常见方式，就是组合模式 =  构造模式  + 原型模式。
       构造模式用来： 定义实例属性
       原型模式用来：定义共享的属性
       这样，每个实例都会有自己的一份实例属性的副本，但同时又共享着对象的引用，最大限度
       的节省了内存。另外，这种混合模式还支持向构造函数传递参数，可谓是集两种模式之长。
       下面代码重写了前面的例子，是JavaScript创建对象的顶级模式，一定要牢记：
    */
    function Person(name,age,job){
    	this.name = name;
    	this.age = age;
    	this.job = job;
    	this.friends = ["何胜男","何凯"];
    }

    Person.prototype = {
    		constructor : Person,
    		sayName : function(){
    			alert(this.name);
    		}
    }

    function onloadFunction(){
    	var person1 = new Person("chenchaoyang",27,"Software Enginner");
    	var person2 = new Person("heshengnan",23,"Software Enginner");

    	person1.friends.push("zhagnsan");

    	console.log(person1.friends);  //  ["何胜男", "何凯", "zhagnsan"]
    	console.log(person2.friends);  //  ["何胜男", "何凯"]

    	console.log(person1.friends == person2.friends);   //false
    	console.log(person1.sayName == person2.sayName);    //true

    	console.log(person1.constructor);   // Person(name, age, job)
    	console.log(person2.constructor);   //Person(name, age, job)

    	console.log(person1 instanceof Object);  //true
    	console.log(person1 instanceof Person);  //true

    	console.log(person2 instanceof Object);  //true
    	console.log(person2 instanceof Person);  //true
    }

</script>