JavaScript原型模式

一、提到原型模式,和构造函数关系密切,先讲一下它

javascript没有类,通过函数来模拟实现类,用new来创建对象,函数内部的this指针来指向调用它的对象。

事例中创建对象myGril,这个对象就获取了构造函数内this指向的所有属性和方法。

var GirlFriend=function (temperament) {
        this.temperament=temperament;
        this.loseTemper=function(){
            return "When angry:"+this.temperament;
        }
    }
var myGirl=new GirlFriend("温柔");
console.log(myGirl.loseTemper()); //When angry:温柔

二、要是没有this的属性呢

通过new运算符创建的对象,只能访问this指向的属性和方法,实例中,myGirl只能访问temperament,lostTemper

temperament无法访问。

var GirlFriend=function (temperament) {
        this.temperament=temperament;
        this.loseTemper=function(){
            return "When angry:"+this.temperament;
        }
        var temperament2=temperament;
    }
var myGirl=new GirlFriend("温柔");
console.log(myGirl.temperament2);//undefined

三、讲了一大堆,和原型有什么关系呢?关键是构造函数内的方法,如果新建对象myGirl2 那么就会再创建一个lostTemper方法引用,对象建多了,对内存来说也是一种浪费,因为方法用的都是同一个,不像属性那样,每个对象都不同。这里就用到了原型对象,在构造函数的原型对象中添加一个这个方法,会使所有通过该构造函数创建的对象都具备该方法。

var GirlFriend=function (temperament) {
        this.temperament=temperament;
    }
GirlFriend.prototype.loseTemper=function(){
            return "When angry:"+this.temperament;
    } var myGirl=new GirlFriend("温柔");
 console.log(myGirl.loseTemper());

四、刚才看到原型对象上添加一个方法,要是把该构造函数的原型对象改变引用位置,也就是指向一个新对象呢。

下例中两个方法同样都能访问,那我们什么时候可以用呢?一定要确认构造函数的原型对象的所有属性和方法在哪后才能这样做,因为这已经改变了指向,要是有原型对象的其他方法创建过,就失效了,所以很危险。

    var GirlFriend=function (temperament) {
        this.temperament=temperament;
    }

   GirlFriend.prototype={
            loseTemper:function(){
                return "When angry:"+this.temperament;
            },
            notLoseTemper:function(){
                return "When not angry:"+this.temperament;
            }
     }
    var myGirl=new GirlFriend("温柔");
console.log(myGirl.loseTemper());//When angry:温柔
console.log(myGirl.notLoseTemper());//When not angry:温柔
				
时间: 2024-08-28 07:00:10

JavaScript原型模式的相关文章

Javascript原型模式总结梳理

在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编程语言中,类并不是必需的,对象不一定需要由类实例化而来,而是通过克隆另外一个对象来得到. 原型模式是用来创建对象的一种模式.在以类为中心的语言中,要创建一个对象首先要指定这个对象的类型,然后实例化一个对象.使用原型模式创建对象时不必关心对象的具体类型,而是找到一个对象,然后通过克隆来创建一个一模一样

Javascript:原型模式类继承

原型模式 每个函数(准确说不是类.对象)都有一个prototype属性,这个属性是一个指针,指向一个对象. 使用原型对象的好处是可以让所有对象实例共享它包含的属性和方法. 1.原型对象 (1)当创建一个新函数,就会为该函数创建一个prototype属性,这个属性指向函数的原型对象. (2)默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向 prototype属性所在函数  的指针. (3)实例的内部包含一个指针,叫[[Prototype]].不过

javascript原型模式发展历程

// 工厂模式 function Person(name,age){ var o = new Object(); o.name=name; o.age=age; o.sayName=function(){ alert(o.name) } return o } var o1=Person('lele',5) var o2=Person('mama',31) // 构造函数模式(能够标识对象属于哪一种类型,但是函数没有复用) function Person(name,age){ this.name=

javascript原型模式(枚举对象的属性)

1.理解原型对象 function Person() { } Person.prototype.name = "Nicholas"; Person.prototype.age = 28; Person.prototype.job = "Software Engineer"; Person.prototype.sayName = function () { alert(this.name); }; var person1 = new Person(); person1

JavaScript设计模式-3.原型模式

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js高级语法3-原型模式 </title> 6 </head> 7 <body> 8 <script> 9 /* 10 javascript原型模式(prototype): 11 1. 原型是一个对象,其他对象可以通过它实现属性的继承,所有的

javascript中的模式解析——原型模式

理解原型模式,首先要理解prototyoe(这个单词翻译 原型)属性,<javascript高级程序设计>书中描述到——我们创建的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法. 我在上一篇构造函数模式所说的,我们构建了一个一个Person函数,然后通过new一个person函数来创建了person1实例,person2实例,既然每个函数都有一个prototype属性,那么我有几个问题想要弄明白: per

理解javascript中的原型模式

一.为什么要用原型模式. 早期采用工厂模式或构造函数模式的缺点:  1.工厂模式:函数creatPerson根据接受的参数来构建一个包含所有必要信息的person对象,这个函数可以被无数次的调用,工厂模式尽管解决了创建多个相似对象的问题,却没有解决对象识别的问题(返回的是自定义的一个对象o,不明确对象o的类型).  2. 构造函数模式:构造函数的调用和其他oo语言一样,用new操作符来构建一个Person的实例:javascript中的构造函数也是函数(所以也可以直接像普通函数那样直接调用方法名

JavaScript 面向对象 (prototype 原型模式)

一. JavaScript 设计思想 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时.但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力.比如,如果网页上有一栏"用户名"要求填写,浏览器就无法判断访问者是否真的填写了,只有让服务器端判断.如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了. 因此,网景公司急需一种网页脚本语言,使得浏览器可以与网页互动.工程师_Brend

Javascript 构造函数模式、原型模式

前两天写完组合继承,打算总结一下原型继承的,不过今天看了一下工厂模式.构造函数模式和原型模式,觉得有必要总结一下以加深印象. ——————————————————————————————————————————————————————————————————————————————————碎碎念. 1.工厂模式 <Javascript 高级程序设计(第3版)> 用了寥寥十多行介绍了工厂模式.我找了一些相关资料,想确定一下这种模式的具体适用场景和优势.按照资料中的说法,是考虑到 ECMAScri