javascript高级编程笔记06(面相对象2)

核桃大号      2022-02-07     718

关键词:

1)  构造函数模式

es中的构造函数可以用来创建特定类型的对象,ObjectArray这样的原生构造函数,在运行时会自动出现在执行环境中,此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法,例如:

function Person(name,age,job){

     this.name=name;

     this.age=age;

     this.job=job;

     this.sayName=function(){

      alert(this.name);

}

}

 

var person1=new Person(“Nicholas”,29,”Software Engineer”);

Var preson2=new Person(“Greg”,27,”Doctor”);

 

要创建Person的新实例,必须使用new操作符,以这种方式调用构造函数实际上火经历一下4个步骤:

  • 创建一个新对象;
  • 将构造函数的作用域赋给新的对象(因此this就指向这个新对象);
  • 执行构造函数中的代码(为这个新对象添加属性);
  • 返回新对象.

对象的constructor属性最初是用来标识对象类型的,但是,提到检测对象类型,还是instanceof操作符要更可靠一些,我们在这个例子中创建的所有对象既是Object的实例,同时也是Person的实例,这一点通过instanceof操作符可以得到验证.

alert(person1 instanceof Object);//true

alert(person1 instanceif Person);//true

alert(person2 instanceof Object);//true

alert(person2 instanceof Person);//true

 

构造函数模式虽然好用,但也并非没有确定,使用构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍,sayName()的方法去死不同的Function的实例.

2)  原型模式

我们创建的每一个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所以实例共享的属性和方法.如下面的例子所示:

function Person(){

}

Person.prototype.name=”Nicholas”;

Person.prototype.age=29;

Person.prototype.job=”Software Engineer”;

Person.prototype.sayName=function(){

 alert(this.name);

};

var person1=new Person();

person1.sayName();”//Nicholas”

 

var person2=new Person();

person1.sayName();//”Nicholas”

Alert(person1.sayName==person2.sayName)://true

 

  • l 理解原型对象

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象,在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针,就上面例子来说,Preson.prototype.constructor指向Person,而通过这个构造函数,我们还可以继续为原型对象添加其他属性和方法.

创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性,至于其他方法,则都是从Object继承而来的,当调用构造函数创建一个新实例后,该实例内部将包含一个指针(内部属性),指向构造函数的原型对象,ECMA-2625版中管这个指针叫[[prototype]],虽然在脚本中没有标准的方式访问[[prototype]],ff,safarichrome在每个对象上都支持一个属性_proto_;而在其他实现中,这个属性对脚本则是完全不可见的。

虽然在所以实现中都无法范围到[[prototype]],但可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系,从本质上讲,如果[[prototype]]指向调用isPrototypeOf()方法的对象(Person.prototype),那么这个方法就返回true,如下:

alert(Person.prototype.isPrototypeOf(person1));//true

alert(Person.prototype.isPrototypeOf(person2));//true

 

这里,我们用原型对象的isPrototypeOf()方法测试了person1person2,因为它们内部都有个指向Person.prototype的指针,因此都返回了true;

es5增加了一个新方法叫 Object.getPrototypeOf(),在所有支持的实现中,这个方法返回[[prototype]]的值,例如:

alert(Object.getPrototypeOf(person1)==Person.prototype);//true

alert(Object.getPrototypeOf(person2).name);//”Nicholas”

 

每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性,搜索首先从对象实例本身开始,如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性,如果在原型对象中找到了这个属性,则返回该属性的值。

使用hasOwnPrototype()方法可以检测一个属性是存在于实例中,还是存在于原型中,这个方法值在给杜属性存在于对象实例中时才返回true,看下面例子:

Function Person(){

 

}

Person.prototype.name=”Nicholas”;

Person.prototype.age=29;

Person.prototype.job=”Software Engineer”;

Person.prototype.sayName=function(){

 alert(this.name);

}

var person1=new Person();

var person2=new Person();

 

alert(person1.hasOwnProperty(“name”))//false

 

person1.name=”Greg”;

alert(person1.name)//”Greg”

alert(person1.hasOwnProperty(“name”))//true

 

alert(person2.name)//”Nicholas”

alert(person2.hasOwnproperty(“name”));//false

 

delete  person1.name

alert(person1.name);//”Nicholas”

alert(person1.hasOwnProperty(“name”));//false

 

IE早期版本的实现中存在一个bug,即屏蔽不可枚举属性的实例属性不会出现在for-in循环中,例如:

var o={

  toString:function(){

   Return “My object”

}

};

for (var prop in o){

If(prop==”toString”){

  alert(“Found toString”);

}

}

 

当以上代码运行时,应该会显示一个警告框,表明找到了toString()方法,这里的对象o定义了一个名为toString的方法,该方法屏蔽了原型中的toString方法,IE,由于其实现认为原型的toString方法被打伤了[[Enumerable]]标记就应该跳过该属性,结果我们不会看到警告框.bug会影响默认不可枚举的所有属性和方法。

要取得对象上所有可枚举的实例属性,可以使用es5Object.keys方法,这个方法接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组,例如:

function Person(){

}

Person.prototype.name=”Nicholas”;

Person.prototype.age=29;

Person.prototype.job=”Software Engineer”;

Person.prototype.sayName=function(){

   alert(this.name);

};

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

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

 

var p1=new Person();

p1.name=”Rob”;

p1.age=31;

var p1keys=Object.keys(p1);

alert(p1keys);//”name,age”

 

如果你想要得到所有实例属性,无论它是否可枚举,都可以使用Object.getOwnPropertyNames()方法

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

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

 

 

 

读编程与类型系统笔记06_函数类型的高级应用

1. 装饰器模式1.1. 扩展对象的行为,而不必修改对象的类1.2. 装饰的对象可以执行其原始实现没有提供的功能1.3. 优势1.3.1. 支持单一职责原则1.3.1.1. 每个类只应该承担一种职责1.4. 经典实现1.4.1. 一个I... 查看详情

《javascript面向对象编程指南》读书笔记②

概述《JavaScript面向对象编程指南》读书笔记①这里只记录一下我看JavaScript面向对象编程指南记录下的一些东西。那些简单的知识我没有记录,我只记录几个容易遗漏的或者精彩的知识点,以后再看也可当做拾遗之用!内容1.枚... 查看详情

读书笔记-javascript面向对象编程

PDF下载链接:http://pan.baidu.com/s/1eSDSTVW密码:75jr第1章引言1.1回顾历史1.2变革之风1.3分析现状1.4展望未来1.5面向对象的程序设计  1.5.1对象(属性和方法的集合)  1.5.2类(相似对象的共同特征,如麻雀、老鹰都是鸟类)  1.5.3... 查看详情

spring框架—面相切面编程aop

spring框架(2)—面相切面编程AOP  AOP(AspectOrientedProgramming),即面向切面编程。  可以说是OOP(ObjectOrientedProgramming,面向对象编程)的补充和完善。OOP引入封装、继承、多态等概念来建立一种对象层次结构,用于模拟公共... 查看详情

javascript面向对象编程指南——学习笔记1

 第1章引言1.1回顾历史1.2变革之风1.3分析现状1.4展望未来1.5面向对象的程序设计  1.5.1对象(属性和方法的集合)  1.5.2类(相似对象的共同特征,如麻雀、老鹰都是鸟类)  1.5.3封装(将属性和方法集合起来,也有封... 查看详情

《javascriptdom编程艺术》读书笔记

 1.javascript弱类型语言,解释性语言。2.javascript数据类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。  javascript内建对象和用户自定义对象。 宿主对象(... 查看详情

《javascript高级程序设计》笔记目录

第1章什么是JavaScript第2章HTML中的JavaScript第3章语言基础第4章变量、作用域与内存第5章基本引用类型第6章集合引用类型第7章迭代器与生成器第8章对象、类与面向对象编程第9章代理与反射第10章 查看详情

《javascript高级程序设计》学习笔记|8.2.创建对象

关注前端小讴,阅读更多原创技术文章创建对象创建单个对象:Object构造函数和对象字面量缺点:使用一个接口创建很多对象,产生大量重复代码相关代码→工厂模式抽象创建特定对象的过程,按照特定接口创建对象functioncreateP... 查看详情

javascript高级程序编程

第一章JavaScript简史 20170510  JavaScript组成部分:核心(ECMAScript) 文档对象模型(DOM)浏览器对象模型(BOM)  NetscapeNavigator(Mozilla)4.06发布JavaScript1.3版本完全兼容ECMAScript-262并对Unicode标准支持实现所有平台中... 查看详情

《javascript面向对象编程指南》读书笔记①

概述JavaScript快忘完了,想看一本专业书拾遗,所以看了这本《JavaScript面向对象编程指南》。个人觉得这本书讲的很透彻很易懂,一些原来有疑惑的地方在这本书里面豁然开朗,看起来非常爽!现在我只记录一下我看这本书记录... 查看详情

javascript面向对象编程:封装

学习Javascript,最难的地方是什么?我觉得,Object(对象)最难。因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握。下面就是我的学习笔记,希望对大家学习这个部分有所帮助。我主要参考了以下两本书... 查看详情

javascript面向对象编程:封装

学习Javascript,最难的地方是什么?我觉得,Object(对象)最难。因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握。下面就是我的学习笔记,希望对大家学习这个部分有所帮助。我主要参考了以下两本书... 查看详情

《架构之美》阅读笔记06

...式出现之后,我们发现面向对象的程序设计,特别是支持高级例程对象或者代理的现代形式包含了函数式编程,在保留了函数式编程的同时也提供了高层的抽象,更好的支持了扩展和复用。下面具体分析一下这两种软件架构。首... 查看详情

javascript高级程序设计-读书笔记

...表示浏览器的一个实例。在浏览器中,window对象既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。 所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。  (2)窗口关系及... 查看详情

《javascript面向对象编程指南》读书笔记—function

...数据类型,它实际上是一种对象。4.2.3.3call()和apply()1.在JavaScript中,每个函数都有call()和apply()两个方法。这两个方法的两个功能:(1)用他们来触发函数,并指定相关的调用参数。(2)他可以让一个对象去“借用“另一... 查看详情

《javascript高级程序设计》学习笔记|8.1.理解对象

关注前端小讴,阅读更多原创技术文章理解对象ECMAScript定义对象:无序属性的集合(一组没有特定顺序的值),其属性可以包含基本值、对象、函数,整个对象可以想象成一个散列表相关代码→创建自定义对象的2种方法:Object... 查看详情

《javascript高级程序设计》学习笔记|7.2.迭代器模式

关注前端小讴,阅读更多原创技术文章迭代器模式ES6新增了2个高级特性:迭代器和生成器迭代方法优/缺点for①需知道如何使用数据结构②遍历顺序不是固有的forEach()①无法标识迭代终止②只适用数组③回调结构较笨拙Iterator接... 查看详情

javascript面向对象的程序设计记录笔记2(设计模式)

以下为JavaScript高级程序设计第六章面向对象的程序设计6.2节创建对象(设计模式部分)读书记录。1)工厂模式:  functioncreatePerson(name,age,sex){    varo=newObejct();    o.age=age;    o.sex=sex;    o.name=name;    r... 查看详情