javascript 高级程序设计(面向对象的程序设计) 1

Object构造函数或对象字面量都可以用来创建对象,但这些方式有个明显的缺点:使用相同一个接口创建很多对象,会产生大量重复代码。

工厂模式

//工厂模式
    function createDog (name,age) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.sayAge = function () {
             alert(age);
        };
        return o;

    }
    var dog1 = createDog("Bob","11");
    var dog2 = createDog("Ann","5");

工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。

构造函数模式

//构造函数模式
    function Dog (name,age) {
         this.name = name;
         this.age = age;
         this.sayAge = function () {
              alert(age);
         };
    }
    var dog1 = new Dog("Bob","11");
    var dog2 = new Dog("Ann","5");

这个例子中直接将方法和属性赋给了this对象。此时函数名Dog使用的D是大写字母,构造函数始终应该以一个大写字母开头,这主要是为了区别于ES中的其他函数;因为构造函数本身也是函数,只不过可以用来创建对象而已。

创建构造函数的新实例,必须使用 new 操作符。

以下为创建步骤

1.创建一个新对象;

2.将构造函数的作用域赋给新对象(this指向新对象);

3.执行构造函数的代码;

4.返回新对象。

dog1和dog2分别保存着Dog的一个不同的实例。这两个对象都有一个constructor(构造函数)属性,该属性指向Dog。

alert(dog1.constructor == Dog); //true
alert(dog2.constructor == Dog); //true

constructor属性最初是用来标识对象类型的。检测对象类型还是用instanceof操作符更靠谱一些。

alert(dog1 instanceof Object) //true

alert(dog1 instanceof Dog) //true

Dog1同时也是Object的实例,是因为所以对象均继承自Object。

构造函数也可以作为普通函数来调用

//作为普通函数
Dog("Bob","11");
window.sayAge(); //"11"
//在另一个对象作用域中调用
var o =new Object();
Dog.call(o,"Bob","11");
o.sayAge(); //11

构造函数的弊端:

每个方法都要在每个实例上重新创建一遍,这样会占用更多的内存,影响效率。

以这种方式创建的函数,会导致不同的作用域链和标识符解析。因此不同的实例上命名的函数是不相等的。

alert(dog1.sayAge == dog2.sayAge) //false

原型模式

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象。

使用prototype对象的好处是不必再构造函数中定义对象实例的信息,而是将这些信息直接添加到prototype对象中。

function Dog(){}

    Dog.prototype.name = "Bob";

    Dog.prototype.age = "11";

    Dog.prototype.jump = function(){alert("跳一下");};
    var dog1 = new Dog();
    Dog1.jump();              //跳一下

    var dog2 = new Dog();

    Dog2.jump();              //跳一下
    alert(dog1.name);
    alert(dog1.jump == Dog2.jump);  //true    

原型对象的验证

  isPrototypeOf():

在创建自定义构造函数后,原型对象默认只会却constructor属性;其他方法从Object继承而来。当调用构造函数创建新实例后,该实例内部将包含一个指针

指向原型对象。但这个属性对脚本是完全不可见的,它存在于实例与构造函数的原型对象之间。

此时可以通过isPrototypeOf()方法来确定。

alert(Dog.prototype.isPrototypeOf(dog1)); //true

 Object.getPrototypeOf():

alert(Object.prototypeOf(dog1) == Dog.prototype); //true
alert(Object.prototypeOf(dog1).name); //"Bob"

该方法可以取得对象的一个原型。

hasOwnProperty():

hasOwnProperty()方法可以检测一个属性是存在于实例中,还是原型中。

function Dog(){}

    Dog.prototype.name = "Bob";

    Dog.prototype.age = "11";

    Dog.prototype.jump = function(){alert("跳一下");};

    var dog1 = new Dog();
    var dog2 = new Dog();

    alert(dog1.hasOwnProperty("name"));  //false

    dog1.name = "Gina";
    alert(dog1.name);   //"Gina"
    alert(dog1.hasOwnProperty("name")); //true
    alert(dog2.hasOwnProperty("name"));  //false--来自原型

所以,只有给定属性存在于对象实例中才会返回true,这里dog1的name被一个新值屏蔽了。这就是作用域链向上搜索的结果。

时间: 2024-11-05 21:38:04

javascript 高级程序设计(面向对象的程序设计) 1的相关文章

【JavaScript】之面向对象的程序设计

最近几天跟着视频利用原生的JavaScript做了几个小插件,有图片画廊和图片轮转,实践的过程中,发现对JS的面向对象部分很是陌生,今日重看了<JavaScript高级程序设计>的面向对象部分,并结合了IMOOC网上的<JS深入浅出>教程在此做一下知识的梳理和总结. 一.什么是对象 ECMA-262中把对象定义为:"无序属性的组合,每个属性包含基本值.对象或者函数." 这就相当于说对象是一组没有特定顺序的值,每个属性或方法都有一个名字key,和对应的value.

Javascript高级篇-面向对象的特性

一.创建对象 1.1初始化器 var any={ name:"some", age:10, action:function(){ alert(this.name+":"+this.age); } }; 1.2构造方法 function some(name,age){ this.name=name; this.age=age; this.action=function(){ alert(this.name+":"+this.age); } } va

javascript高级特性

01_javascript相关内容02_函数_Arguments对象03_函数_变量的作用域04_函数_特殊函数05_闭包_作用域链&闭包06_闭包_循环中的闭包07_对象_定义普通对象08_对象_定义函数对象09_对象_内建对象10_原型_为函数对象增加属性或方法11_原型_利用函数对象本身重写原型12_继承_函数对象之间的继承13_继承_普通对象之间的继承 javascript高级特性(面向对象): * 面向对象:   * 面向对象和面向过程的区别:     * 面向对象:人就是对象,年龄\

《JavaScript高级程序设计》学习笔记(5)——面向对象编程

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object-Oriented, OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.前面提到过,ECMAScript中没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. ECMA-262把对象定义为:"无序属性的集合,其属性可以包含基本值.对象或者函数.

JavaScript高级程序设计学习笔记--面向对象程序设计

工厂模式 虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码.为解决这个问题,人们开始使用 工厂模式的一种变体. function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var

读书时间《JavaScript高级程序设计》二:面向对象

接着上次的进度,开始看第6章. 第6章 面向对象的程序设计 理解对象 创建自定义对象最简单的方式就是创建一个 Object 的实例,然后为它添加属性和方法. var person = new Object(); person.name = 'xxx'; person.say = function(){ alert(this.name); } //等同于 对象字面量 var person = { name: 'xxx', say: function(){ alert(this.name); } }

JavaScript高级程序设计笔记之面向对象

说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,JavaScript中如何面向对象? JavaScript中将对象定义为:一组无序的 键值对的集合,属性以及方法的名称就是键,键的值可以是任何类型(字符串,数字,函数--) 在JavaScript中,所有对象继承自Object,所有对象继承自Object,所有对象继承自Object! 创建 1  简单创建

《Javascript高级程序设计》阅读记录(二):第四章

这个系列之前文字地址:http://www.cnblogs.com/qixinbo/p/6984374.html 这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较深入,而且实际使用价值较大的内容记录下来,并且注释上我的一些想法.做这个一方面是提升了我的阅读效果以及方便我以后阅读 另一个目的是,Javascript高级程序设计这本书内容很多也很厚,希望其他没有时间的人可以通过看这系列摘录,就可以大体学到书里面的核心内容. 绿色背景的内容是我认为比较值得注意的原著内容.

赠书《JavaScript高级程序设计(第三版)》5本

本站微博上正在送书<JavaScript高级程序设计>走过路过的不要错过,参与方式,关注本站及简寻网+转发微博:http://weibo.com/1748018491/DoCtp6B8r 本站联合简寻网#寻找千里码# 正在送书<javascript高级程序设计>第三版 5本,对这本书期待的朋友可以去参与哦. 关于简寻网: 我们是一群年轻的创业者,我们关注互联网发展,追逐技术的进步.互联网时代的到来,我们希望能通过技术的手段解决生活中的问题.招聘行业是一个传统而又新兴的行业,传统的流

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

以下为JavaScript高级程序设计 第六章面向对象的程序设计6.2节 创建对象(设计模式部分)读书记录. 1)工厂模式: function createPerson(name, age, sex) { var o = new Obejct(); o.age = age; o.sex = sex; o.name = name; return o; } var person = createPerson('Tom', 12, 'male'); var person = createPerson(