面向对象01 理解对象和创建对象

理解对象和创建对象

1.理解对象

  • 创建一个Object的实例,然为其添加属性和方法(早期创建对象的模式)
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";

person.sayName = function(){
    alert(this.name);

}
  • 对象字面量语法重写上述过程:
var person = {
    name: "Nicholas";
    age: 29;
    job: "Software Engineer";
    
    sayName: function(){
        alert(this.name);
    }
}

1.1 属性类型

ECMAScript中有两种 属性(property) :数据属性和访问器属性,用 特性(attribute) 来描述属性的各种特征。

数据属性:

数据属性包含一个数据值的位置,在这个位置可以读取和写入值。

数据属性有四个描述其行为的特性:

  • [[Enumerable]]:表示能否通过 for-in循环返回属性,默认值为true。
  • 要修改属性默认的特性,必须使用ECMAScript的Object.defineProperty()方法
访问器属性

访问器属性不包含数据值,它们包含一对getter和setter函数(不是必须的)。在读取访问器属性时,会调用getter函数,在写入访问器属性时,会调用setter函数并传入新值。访问器属性有以下四个特性:

  • [[Enumerable]]:表示能否通过 for-in循环返回属性,默认值为true。
  • 访问器属性不能直接定义,必须使用Object.defineProperty()方法来定义
var book = {
    _year:2004;
    edition: 1;
};
Object.defineProperty(book,"year",{
    get:function(){
        return this._year;
    },
    set: function(newValue){
        if(newValue > 2004){
            this._year = newValue;
            this.edition+=newValue -2004;
        }
    }
};
book.year = 2005; //对访问器属性year进行写入,因此调用setter函数
alert(book.edition); //2

2 创建对象

Object构造函数和对象字面量

前面提到了早期创建对象的两种方法: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 person1 = create("Nicholas", 29, "Software Engineer");

缺点:

  • 工厂模式虽然解决了创建多个相似对象会有大量重复代码的问题,但是却没有解决 对象识别 的问题(因为返回的都是Object类型)

构造函数模式

ECMAScript中的构造函数可以用来创建特定类型的对象。

function Person(name, age, job){
    this.name=name;
    this.age=age;
    this.job=job;
    this.sayName=function(){
        alert(this.name);
    }
}
// 注意将Person当做构造函数,需要使用new操作符来创建新对象
var person1 = new Person("xin",22,"Software Engineer");
var person2 = new Person("wu",22,"Software Engineer");

在上面的例子中,person1和person2分别保存着一个不同的实例,但是这两个对象都有一个constructor(构造函数)属性,该属性执行Person。

检测对象类型:

  • 利用constructor属性:
alert(person1.constructor == Person); //true
  • 利用instanceof操作符:
alert(person1 instanceof Object); //true
alert(person1 instanceof Person); //true

创建自定义的构造函数意味着将来可以将它的事例标识为一种特定的类型

缺点:

  • 每个方法都要在每个实例上重新创建一遍。上例中,person1和person2中都有一个sayName的方法,但是两个实例中的方法不是同一个Function的实例。因此不同实例上的同名函数是不相等的
  • 解决方法:把函数定义转移到构造函数外部。
function Person(name, age, job){
    this.name=name;
    this.age=age;
    this.job=job;
    this.sayName=sayName;//sayName属性设置为全局的sayName函数
}
function sayName(){
        alert(this.name);
}
var person1 = new Person("xin",22,"Software Engineer");
var person2 = new Person("wu",22,"Software Engineer");
  • 修改后,person1和person2对象共享了在全局作用域中定义的同一个sayName()函数。但是出现了新的问题:

    • 在全局作用域中定义的函数(sayName)实际上只能被某个对象(person1 person2)调用,让全局作用域“名不副实”;

    • 如果对象需要定义很多方法,则需要在全局作用域中定义很多全局函数,是得这个 自定义的引用类型(自定义的构造函数) 无封装性可言。

    • 解决方法:原型模式

原型模式

每个函数都有一个prototype(原型) 属性,这个属性是一个指针,指向一个对象,而这个对象的用途是 包含可以由特定类型的所有实例共享的属性和方法

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.ptototype.sayName = function(){
    alert(this.name);
}
var person1 = new Person();
person1.sayName(); //"Nicholas"

var person2 = new Person();
person2.sayName();//"Nicholas"
//person1和person2的属性和方法是所有实例共享的
alert(person1.sayName == person2.sayName); //true
理解原型对象
image
原型属性[[Prototype]]的访问
  • 确定对象之间的关系 isPrototypeOf
alert(Person.prototype.isPrototypeOf(person1));//true
  • 获取原型对象 Object.getPrototypeOf()
alert(Object.getPrototypeOf(person1) == Person.prototype); //true
alert(Object.getPrototypeOf(person1).name);//Nicholas
  • 每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索 首先从对象实例本身开始 。如果在实例中找到了具有给定名字的属性,则返回该属性的值。如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了额这个属性,则返回该属性的值。
  • 虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象重写原型中的值。如果在实例中添加了一个属性,且该属性与实例原型中的一个属性同名,则该属性会屏蔽原型中的那个属性。
  • 可以使用hasOwnProperty()方法来检测一个属性是存在与实例中,还是存在与原型中。

person1.hasOwnProperty("name"); //false

  • 原型与in操作符:单独使用in操作符时,in操作符会在通过原型能够访问给定属性时返回true,无论该属性存在与实例中还是存在原型中。同时使用hasOwnProperty()方法和in操作符,就可以确定该属性到底是存在与对象中,还是存在与原型中
alert( !person1.hasOwnProperty(name) && name in person1); //true
更简单的原型语法:

前面的例子中每添加一个属性和方法就要敲一遍Person.prototype。为了减少不必要的输入,更常见的方法是 用一个包含所有属性和方法的对象字面量来重写整个原型对象

function Person(){
}
Person.prototype = {
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    sayName: function(){
        alert(this.name);
    }
}

注意
这里使用的语法,本质上完全重写了默认的prototype对象,因此constructor属性也就变成了新对象的constructor属性(指向Object构造函数),不再指向Person函数。使用instanceof操作符还能返回正确的结果,但是通过constructor已经无法确定对象的类型了。

var friend = new Person();
alert(friend.instanceof Person);//true
alert(friend.constructor == Person);//false

如果constructor属性很重要,可以将其设为适当的值

//方法一,但是会使constructor属性的[[Enumerable]]特性变为true
function Person(){
}
Person.prototype = {
    constructor:Person,
    name:"Nicholas",
    age:29,
    job:"Software Engineer",
    sayName:function(){
        alert(this.name);
    }
}
function Person(){
}
Person.prototype = {
    name:"Nicholas",
    job:"Software Engineer",
    age:29,
    sayName:function(){
        alert(this.name);
    }
}
Object.defindProperty(Person.prototype, "constructor",{ 
    enumerable: false,
    value: Person
});
原生对象的原型:

所有原生类型(Object,Array,String,等等)都在其构造函数的原型上定义了方法。

原型对象的问题:
  • 省略了为构造函数传递参数,导致了所有实例在默认情况下都取得相同的属性值。
  • 原型对象的最大问题是由其共享属性 的本质所导致的:
function Person(){
}
Person.prototype = {
    constructor: Person,
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    friends: ["Sheldon","Court"],
    sayName: function(){
        alert(this.name);
    }
};
var person1 = new Person();
var person2 = new Person();

person1.friends.push("van");
alert(person1.friends); //sheldon,court,van
alert(person2.friends); //sheldon,court,van
alert(person1.friends === person2.friends);//true

出现上述问题的原因在于:person1和person2的friends属性共享一个数组。

组合使用构造函数模式和原型模式

构造函数模式用来定义实例属性,原型模式用来定义方法和共享属性。结果每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度的节省了内存。

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["sheldon","mary"];
}
Person.prototype = {
    constructor: Person,
    sayName: function(){
        alert(this.name);
    }
}

稳妥构造函数模式

  • 特点:1.新创建对象的实例方法不引用this;2.不使用new 操作符调用构造函数
function Person(name,age,job){
    var o = new Object();
    o.sayName = function(){
        alert(name);
    }
    return o;
}
  • 以这种方式创建的对象中,除了使用sayName()方法之外,没有其他办法访问name的值。
var friend = Person("Nicholas",29,"Software Engineer");
friend.sayName();

即使有其他代码会给这个对象添加方法或数据成员,但也不可能有别的方法访问传入到构造函数中的原始数据(name,job,age)。稳妥构造函数模式提供的这种安全性,使得它非常适合在某些安全环境中执行。

使用稳妥构造函数模式创建的对象与构造函数之间没什么关系,因此instanceof操作符对这种对象没有什么意义

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容