`
lantian_123
  • 浏览: 1370131 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JavaScript中的原型模式

阅读更多

一、    Prototype:每个函数(函数也可以理解为对对象)都有一个prototype属性,是一个指向某个对象的指针,这里所说的“某个对象”是由特定类型的所有实例共享的属性和方法构成的一个对象。可以简单的理解为由构造方法创建的对象的原型对象。

二、    定义方式

	        function Person(){}
		
		Person.prototype.name = "zhangsan";
		Person.prototype.age =23;
		Person.prototype.sayHello = function(){
			return "hello,I'm zhangsan";
		};
 

     因为每个函数都有prototype属性,而prototype又是指向原型对象的一个指针,所有我们就可以采用“.”的方式去定义原型对象的属性和方法。接下来,创建Person对象的时候就可以直接调用构造函数来创建。

                var person1 = new Person();
		var person2 = new Person();
 

 person1、person2对象都共享原型对象所有的属性和方法,我们可以从以下输出结果可以看出来:

 

                alert(person1.name);    //zhangsan
		alert(person2.name);    //zhangsan
		alert(person1.sayHello());  //hello,I’m zhangsan
		alert(person2.sayHello());  //hello,I’m zhangsan
 

 三、    深入理解原型对象

 1.construtor:所有原型对象都有一个construtor属性,他是指向prototype 属性所在的函数的一个指针,可以用下面语句检测:
alert(    Person.prototype.constructor == Person);//true


2.Person.prototype.constructor与Person.constructor的对比

alert(	Person.prototype.constructor) // function Person() {}
alert(Person.constructor); //function Function() {[native code]}
 

 一个alert语句很好理解,因为在前面已经说明constructor指向的就是Person()函数,但是第二个alert显示的是Function()函数,究及原因还得从“函数与对象”的关系说起。

 

         alert(typeof Person);   //function
	alert(Person instanceof Object);  //true
 

 从上面两个结果可以看出,Person是一个函数,但是他可以作为对象存在,从这里我们就能很好的理解Person.constructor显示的信息为什么是“function Function() {[native code]}”了。具体可以这样去分析:

因为:function Person(){}等同于var Person = new Function(){};

 

代码的准备:

function Person(){}

var Person = new Function(){}

现在我们就开始来看图说话: Person 引用指向的是 Function 实例(即中间的矩形框,右边的椭圆只是为了说明它左边表示一个对象)

Person.constructor 可以这样去追踪 : Person 引用 ”—->prototype à constructor à Function(){} 最后指向的是 Function 函数 ( 对象 ) 所以 alert(Person.constructor); 得到的值为: function Function() {[native code]}


所以alert(    Person.prototype.constructor)的值为:function Person() {}

4.每个person实例都包含一个内部属性_proto_,这个属性指向了原型对象。可以用isPrototypeOf()判断
alert(Person.prototype.isPrototypeOf(person1))//true.


5.对象读取属性或方法的步骤:从对象实例本身开始,如果找到了给定名字的属性,则返回该值,如果没有读到,则继续查找该实例内容属性_proto_指向的原型对象中查找。注意:如果实例本身有一个与原型实例相同名字的属性,那么原型实例中的属性将被屏蔽(不是覆盖,原型对象中的该属性的值依然保持原来的值不变)。使用delete可以删除实例中的属性,从而重新获取原型实例中的属性。

                alert(person1.name); //zhangsan
		person1.name="lisi";
		alert(person1.name); //lisi
		alert(Person.prototype.name);//zhangsan
                 delete person1.name;
		alert(person1.name);  //zhangsan
 

 6.使用hasOwnProperty(name)(该方法继承于Object)判断属性是对象实例本身还是来自于原型对象中。

 

 

		alert(person1.hasOwnProperty(“name”)); //false
		peson1.name=”lisi”;
		alert(person1.hasOwnProperty(“name”)); //true
 

 

7.判断属性来自于原型属性是需要用的in操作符
单独使用in时,通过对象能够访问的给定的属性值时返回true,而不在乎是从原型中还是实例中访问的。

!peron1.hasOwnProperty(“name”)&&(“name” in person1)  //true
 

今天就写到这里,期待下期的精彩!!!


  • 大小: 2.9 KB
  • 大小: 8.3 KB
  • 大小: 8.8 KB
分享到:
评论

相关推荐

    JavaScript设计模式+JavaScript模式+JavaScript异步编程

    在JavaScript中,常见的设计模式包括: - 单例模式:确保一个类只有一个实例,并提供全局访问点。 - 工厂模式:创建对象时避免使用new操作符,提供更灵活的实例化过程。 - 观察者模式:定义对象间的一种一对多...

    JavaScript设计模式与开发实践.pdf

    第一部分讲解了JavaScript语言的面向对象和函数式编程的知识,包括静态类型语言和动态类型语言的区别及其在实现设计模式时的异同、封装、继承、多态在动态类型语言中的体现、JavaScript基于原型继承的面向对象系统的...

    JavaScript 设计模式(高清扫描版本)- 张容铭

    JavaScript设计模式是由张容铭编著的一本关于JavaScript编程领域的重要参考书籍,主要探讨了如何在JavaScript编程中应用设计模式来提升代码质量和可维护性。设计模式是软件工程中的最佳实践,它们是针对常见问题的...

    JavaScript设计模式.pdf

    JavaScript设计模式是指在软件开发中使用JavaScript语言编写的设计模式。这些设计模式旨在提高代码的重用性、可读性、维护性和扩展性。以下是JavaScript设计模式的知识点总结: 1. 单体模式(Singleton Pattern)...

    学用JavaScript设计模式

    书中不仅介绍了JavaScript中经典和现代的设计模式,还包括了针对不同JavaScript开发框架(如MVC、MVP、MVVM)的设计模式,以及最新的模块化JavaScript设计模式(AMD、CommonJS、ES Harmony)和jQuery中的设计模式。...

    Javascript 设计模式 电子书

    在深入探讨《Javascript 设计模式》这本电子书之前,需要先理解设计模式的含义及其在软件开发中的重要性。设计模式是软件工程领域中经过时间验证的一套最佳实践和解决方案,它们针对特定问题提供了模板化设计方案。...

    JavaScript 设计模式 azw3

    《JavaScript设计模式》是JavaScript设计模式的学习指南。全书分为14章。首先介绍了什么是模式、模式的结构、类别...通过阅读本书,他们将能够提高对设计模式的认识,并学会如何将设计模式应用到JavaScript编程语言中。

    javascript 原型模式实现OOP的再研究

    JavaScript中的原型模式是一种实现面向对象编程(OOP)的关键机制,它基于原型继承,使得对象可以从其他对象那里获得属性和方法。在这个模式下,每个函数都有一个`prototype`属性,这个属性是一个对象,用于共享属性...

    javascript DOM高级程序设计 及 javascript 设计模式

    在吃透了前面所说的书之后,接下来两本书的顺序已经无关紧要了,《JavaScript DOM高级程序设计》(注意和《JavaScript 高级程序设计》相区别)和《JavaScript设计模式》,这两本都是重量级的书,能让你的JS技术上一...

    精通javascript设计模式en版pdf

    书中首先介绍了设计模式的基本概念,阐述了为何在JavaScript中应用设计模式是必要的。它强调了JavaScript的灵活性和动态性,同时也指出这些特性可能导致的代码混乱和维护难题。通过学习设计模式,开发者可以更好地...

    JavaScript设计模式Demo

    JavaScript设计模式是编程实践中的一种重要概念,它是为了在JavaScript环境中编写更加高效、可维护和可扩展的代码而形成的一套通用解决方案。这个"JavaScript设计模式Demo"可能包含了各种常见的设计模式示例,如单例...

    javascript 设计模式

    在JavaScript中,由于其特殊的原型继承机制和动态类型特性,设计模式的应用有一些独特的特点。 ### 1. 继承机制 在JavaScript中,继承主要通过原型链(Prototype Chain)实现。每个对象都有一个`__proto__`属性,...

    Javascript 设计模式 很经典 第一本

    该书深入浅出地介绍了面向对象编程在JavaScript中的应用,为读者提供了丰富的设计模式实例和实践经验,帮助开发者更好地理解和掌握JavaScript的设计原则。 #### 二、面向对象编程(OOP)基础 本书首先介绍了面向...

    外文翻译:学用JavaScript设计模式

    jQuery作为一个非常流行的JavaScript库,其实现中也运用了许多设计模式。本书中提到了几种关键的设计模式: - **Composite Pattern(组合模式)**:将对象组合成树形结构以表示部分-整体层次结构。 - **适配器模式*...

    Javascript设计模式源码

    作者针对常见的开发任务,从YUI等实战代码中取材,提供了专家级的解决方案,不仅透彻剖析了JavaScript扣的面向对象编程,而且深入探讨了如何用JavaScript实现以前只在服务器端应用的设计模式,如何根据实际场景选择...

    JavaScript高级与设计模式.zip

    在这个"JavaScript高级与设计模式"的主题中,我们将深入探讨JavaScript的高级特性以及如何在实践中应用设计模式。 首先,让我们关注JavaScript的高级特性。这些特性包括但不限于: 1. **闭包(Closures)**:闭包...

    javascript设计模式与开发实践

    针对JavaScript语言特性全面介绍了更适合JavaScript程序员的了16个常用的设计模式,讲解了JavaScript面向对象和函数式编程方面的基础知识,介绍了面向对象的设计原则及其在设计模式中的体现,还分享了面向对象编程...

    JAVASCRIPT设计模式[收集].pdf

    在现代前端开发中,JavaScript设计模式已经成为了一门必修课程。它不仅能够提升开发者的编码效率,而且还能保证编写的代码更加健壮、可维护。本文将对JavaScript设计模式的核心概念进行深入探讨,以期帮助开发者更好...

    JavaScript模式中文[pdf] 百度云

     第7章 设计模式  单体模式  工厂模式  迭代器模式  装饰者模式  策略模式  外观模式  代理模式  中介者模式  观察者模式  小结  第8章 DOM和浏览器模式  关注分离  DOM脚本  事件  长期运行脚本  ...

Global site tag (gtag.js) - Google Analytics