第六章 创建对象

  • 构造函数
  • constructor和instanceof区别
  • 构造函数和普通函数区别
  • 原型模式
    • 理解原型对象
    • isPrototypeOf()和Object.getPrototypeOf()
    • hasOwnProperty()
  • 原型和in操作符
  • 更简单的原型语法
  • 原型的动态性
  • 原型对象的问题

构造函数

  要创建构造函数的新实例,必须使用new操作符。new是调用的意思,调用构造函数会经历以下4个步骤:
(1)创建一个新对象
(2)将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
(3)执行构造函数中的代码(为这个新对象添加属性)
(4)返回新对象
  创建的新对象有一个constructor(构造函数)属性,该属性指向构造函数。

constructor和instanceof区别

实例对象的constructor指向的是创建这个实例的构造函数,具体某一个。
instanceof是检测实例对象的对象类型,也可以检测是不是具体某个构造函数的实例。

构造函数和普通函数的区别

  构造函数和普通函数的唯一区别,就在与调用它们的方式不同。构造函数是用new来调用,普通函数是'.'后面加上()来调用。构造函数也是函数,不存在定义构造函数的特殊语法。任何函数,只要通过new操作符来调用,那它就可以作为构造函数;而任何函数如果不通过new操作符来调用,那它跟普通函数没有区别,另外构造函数的首字母是大写。

原型模式

  我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型的好处是可以让所有对象实例共享它所包含的属性和方法。

理解原型对象

  无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针。
  当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性)指向构造函数的原型对象,这个指针叫[[prototype]]或写成proto,这个属性对脚本则是完全不可见的。

isPrototypeOf()和Object.getPrototypeOf()

  isPrototypeOf()方法是用来判断某个对象的原型在另外一个对象的原型链上,返回的是布尔值。
  Object.getPrototypeOf()方法是返回对象的原型。例:

function Person () {}
var person1 = new Person()
console.log(Person.prototype.isPrototypeOf(person1))    // true
console.log(Object.prototype.isPrototypeOf(person1))    // true
console.log(Object.prototype.isPrototypeOf(Person))    // true
console.log(Object.getPrototypeOf(person1) === Person.prototype)   // true 

hasOwnProperty()

  这个方法是检测一个属性是存在于实例中还是在原型中,如果是实例中返回true,如果不是返回false。

原型和in操作符

  有两种方式使用in操作符:单独使用和在for-in循环中使用。在单独使用时,in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。例:

function Person () {}
Person.prototype.name = 'nike'
var person1 = new Person()
console.log('name' in person1)       // true
person1.name = 'addidas'
console.log('name' in person1)      // true

  利用这个特点可以判断属性存在于实例中还是在原型中,例:

function Person () {}
Person.prototype.name = 'nike'
var person1 = new Person()
person1.age = 18
function hasProperty (object, value) {
     return  !object.hasOwnProperty(value) && (value in object)
}
console.log(person1, 'name')     // true   说明name在原型中
console.log(person1, 'age')        // false  说明age在实例中

  在使用for-in循环时,返回的是所有能够通过对象访问的、可枚举的属性,其中既包括存在于实例中的属性,也包括于原型中的属性。屏蔽了原型中不可枚举属性(即将enumerable标记为false的属性)的实例属性也会在for-in循环中返回,因为根据规定,所有开发人员定义的属性都是可枚举的。例:

var o = {
     toString: function () {
       return 'my object'
   }
}
for (var prop in o) {
     if (prop === 'toString') {
         console.log('found toString')
    }
}

  通过上面的例子我们可以看到定义的toString属性会屏蔽原型上的toString方法,原型上的toString方法不可枚举,但是这个方法定义在实例上就可以被枚举。
  要取得对象上所有可枚举的实例属性,可以使用Object.keys()方法,这个方法接受一个对象作为参数,返回一个包含所有可枚举属性的字符串数组。例:

  function Person () {}
  Person.prototype.name = 'nike'
  Person.prototype.age = 29
  Person.prototype.job = 'software engineer'
  Person.prototype.sayName = function () {
    console.log(this.name)
  }
  var keys = Object.keys(Person.prototype)
  console.log(keys)        //    ["name", "age", "job", "sayName"]
  var p1 = new Person()
  p1.name1 = 'addidas'
  p1.age1 = 10
  var p1keys = Object.keys(p1)
  console.log(p1keys)     // ["name1", "age1"]
  var p2keys = []
  for (var value in p1) {
    p2keys.push(value)
  }
  console.log(p2keys)      // ["name1", "age1", "name", "age", "job", "sayName"]
  console.log(Object.getOwnPropertyNames(Person.prototype))
//   ["constructor", "name", "age", "job", "sayName"]
  console.log(Object.getOwnPropertyNames(p1))
//   ["name1", "age1"]

  从上面的例子中我们可以看到上面几种方法的区别:
Object.keys()方法取得对象上所有可枚举的属性,只是在实例
for in 方法取得对象上所有可枚举的属性,不管在实例上还是在原型上
Object.getOwnPropertyNames()方法取得对象上所有实例属性,无论是否可枚举

更简单的原型语法

  我们发现前面例子中每添加一个属性和方法都要敲一遍Person.prototype。为减少不必要的输入,可以用对象字面量来重写整个原型对象,例:

function Person () {}
Person.prototype = {
   name: 'nike',
   age: 29
}

  我们将Peroson.prototype设置为等于一个以对象字面量形式创建的新对象。最终结果相同,但有一个例外:constructor属性不再指向Peroson了,而是指向Object构造函数。尽管instanceof操作符还能返回正确的结果,但通过constructor已经无法确定对象的类型了。

接上面的代码
var friend = new Person()
console.log(friend instanceof Object)   // true
console.log(friend instanceof Person)  // true
console.log(friend constructor == Person)  // false
console.log(friend constructor == Object)  // true

  如果constructor的值真的很重要,可以像下面这样特意将它设置回适当的值。

function Person () {}
Person.prototype = {
   constructor: Person,
   name: 'nike',
   age: 29
}

  这样子constructor就会重新指向Person,但是有一个问题,以这样方法重设constructor属性会导致它的enumerable特性被设置为true,默认情况下是不可枚举的,所以这时候可以用Object.defineProperty()来设置enumerable的值。

原型的动态性

  我们对原型对象的修改能够立即从实例上反应出来,即使先创建了实例后修改原型也照样如此,例:

var friends = new Person()
Person.prototype.sayHi = function () {
    console.log('hi')
}
friends.sayHi()     // hi

  如果是我们重写原型对象,那么情况就会不一样了,我们知道,调用构造函数时会为实例添加一个指向最初原型的[[prototype]]指针,而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。请记住:实例中的指针仅指向原型,而不指向构造函数,例:

  function Person () {}
  var person1 = new Person()
  Person.prototype = {
    constructor: Person,
    name: 'nike',
    age: 29,
    friends: ['sha', 'he'],
    sayName: function () {
      console.log(this.name)
    }
  }
  console.log(person1.sayName())    // error

  上面的例子可以看到,当我们new一个实例的时候person1就已经指向了Person最初的原型,这时候重写原型就已经切断了与任何之前已经存在的对象实例之间的联系。

原型对象的问题

  原型对象也不是没有缺点。首先,它省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的值。另外原型模式最大的问题是由其共享的本性导致的,对于那些包含基本类型值的属性没有影响,因为是通过实例上添加一个同名属性,但是对于包含引用类型值的属性来说就会有问题,例:

  function Person () {}
  Person.prototype = {
    constructor: Person,
    name: 'nike',
    age: 29,
    friends: ['sha', 'he'],
    sayName: function () {
      console.log(this.name)
    }
  }
  var person1 = new Person()
  var person2 = new Person()
  person1.friends.push('van')
  console.log(person1.friends)   // 'sha', 'he','van' 
  console.log(person2.friends)   // 'sha', 'he','van' 

  从上面的例子中我们可以看到两个问题:
1.修改person1.friends引用的数组,向数组中添加了一个字符串,由于friends存在于Person.prototype中而不是person1中,所以修改的是Person.prototype中friends数组,person2.friends的值也会跟着改变。
2.对比上面两个例子,我们发现如果person1定义在重写原型之前,那么创建的person1实例对象就会指向最初的原型。如果person1定义在重写原型之后,那么创建的person1实例对象就会指向重写原型。

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

推荐阅读更多精彩内容