www.qjdy.com-奇迹赌场 > www.qjdy.com > 通过Object构造函数或对象字面量的方式也可以创

原标题:通过Object构造函数或对象字面量的方式也可以创

浏览次数:138 时间:2019-12-08

JavaScript 创立对象的多种办法

2017/06/20 · JavaScript · 对象

原稿出处: Xuthus Blog   

JavaScript创立对象的方法有不菲,通过Object布局函数或对象字面量的法子也得以创设单个对象,明显这二种艺术会生出多量的双重代码,并不切合量产。接下来介绍二种特别杰出的创设对象的主意,他们也并驾齐驱势。

图片 1

工厂方式

function createPerson(name, job) { var o = new Object() o.name = name o.job = job o.sayName = function() { console.log(this.name) } return o } var person1 = createPerson('Jiang', 'student') var person2 = createPerson('X', 'Doctor')

1
2
3
4
5
6
7
8
9
10
11
function createPerson(name, job) {
  var o = new Object()
  o.name = name
  o.job = job
  o.sayName = function() {
    console.log(this.name)
  }
  return o
}
var person1 = createPerson('Jiang', 'student')
var person2 = createPerson('X', 'Doctor')

能够多数十次调用这些工厂函数,每一次都会重临多个包括多少个天性和叁个办法的目的

工厂形式固然减轻了创设四个平日对象的主题材料,然而尚未消除对象识别难题,即无法清楚二个目的的档案的次序

构造函数方式

function Person(name, job) { this.name = name this.job = job this.sayName = function() { console.log(this.name) } } var person1 = new Person('Jiang', 'student') var person2 = new Person('X', 'Doctor')

1
2
3
4
5
6
7
8
9
function Person(name, job) {
  this.name = name
  this.job = job
  this.sayName = function() {
    console.log(this.name)
  }
}
var person1 = new Person('Jiang', 'student')
var person2 = new Person('X', 'Doctor')

不曾突显的创设对象,使用new来调用那么些布局函数,使用new后会自动试行如下操作

  • 开创四个新指标
  • 以此新目的会被实行[[prototype]]链接
  • 其生机勃勃新目的会绑定到函数调用的this
  • 归来那几个目的

动用那么些艺术成立对象能够检查实验对象类型

person1 instanceof Object // true person1 instanceof Person //true

1
2
person1 instanceof Object // true
person1 instanceof Person //true

不过采用布局函数创制对象,每一种方法都要在各种实例上海重机厂复创建贰回

原型形式

function Person() { } Person.prototype.name = 'Jiang' Person.prototype.job = 'student' Person.prototype.sayName = function() { console.log(this.name) } var person1 = new Person()

1
2
3
4
5
6
7
8
function Person() {
}
Person.prototype.name = 'Jiang'
Person.prototype.job = 'student'
Person.prototype.sayName = function() {
  console.log(this.name)
}
var person1 = new Person()

将音讯一向抬高到原型对象上。使用原型的利润是能够让全数的实例对象分享它所蕴藏的性子和措施,不必在布局函数中定义对象实例新闻。

原型是四个非常主要的定义,在意气风发篇随笔看懂proto和prototype的涉及及界别中讲的卓殊详尽

更简便易行的写法

function Person() { } Person.prototype = { name: 'jiang', job: 'student', sayName: function() { console.log(this.name) } } var person1 = new Person()

1
2
3
4
5
6
7
8
9
10
function Person() {
}
Person.prototype = {
  name: 'jiang',
  job: 'student',
  sayName: function() {
    console.log(this.name)
  }
}
var person1 = new Person()

将Person.prototype设置为等于叁个以指标字面量格局创制的靶子,不过会招致.constructor不在指向Person了。

应用这种方法,完全重写了暗许的Person.prototype对象,因而 .constructor也不会存在那间

Person.prototype.constructor === Person // false

1
Person.prototype.constructor === Person  // false

假使急需以此个性的话,可以手动加多

function Person() { } Person.prototype = { constructor:Person name: 'jiang', job: 'student', sayName: function() { console.log(this.name) } }

1
2
3
4
5
6
7
8
9
10
function Person() {
}
Person.prototype = {
  constructor:Person
  name: 'jiang',
  job: 'student',
  sayName: function() {
    console.log(this.name)
  }
}

不过这种格局依然远远不够好,应该为constructor属性暗中认可是举不胜举的,那样直接设置,它将是可枚举的。所以能够时候,Object.defineProperty方法

Object.defineProperty(Person.prototype, 'constructor', { enumerable: false, value: Person })

1
2
3
4
Object.defineProperty(Person.prototype, 'constructor', {
  enumerable: false,
  value: Person
})

缺点

应用原型,全部的习性都将被分享,那是个不小的独特之处,雷同会带给一些劣势

原型中负有属性实例是被多数实例分享的,这种分享对于函数特别适宜。对于那么些含有基本值的质量也勉强能够,究竟实例属性可以屏蔽原型属性。但是援用类型值,就能够并发难点了

function Person() { } Person.prototype = { name: 'jiang', friends: ['Shelby', 'Court'] } var person1 = new Person() var person2 = new Person() person1.friends.push('Van') console.log(person1.friends) //["Shelby", "Court", "Van"] console.log(person2.friends) //["Shelby", "Court", "Van"] console.log(person1.friends === person2.friends) // true

1
2
3
4
5
6
7
8
9
10
11
12
function Person() {
}
Person.prototype = {
  name: 'jiang',
  friends: ['Shelby', 'Court']
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push('Van')
console.log(person1.friends) //["Shelby", "Court", "Van"]
console.log(person2.friends) //["Shelby", "Court", "Van"]
console.log(person1.friends === person2.friends) // true

friends存在与原型中,实例person1和person2指向同三个原型,person1校勘了引用的数组,也会反射到实例person第22中学

整合使用布局函数情势和原型方式

那是选拔最为布满、承认度最高的大器晚成种成立自定义类型的秘技。它能够减轻地方那么些情势的后天不良

使用此方式能够让每一种实例都会有和好的大器晚成份实例属性别本,但还要又分享着对艺术的引用

那样的话,尽管实例属性校正引用类型的值,也不会耳濡目染其它实例的属性值了

function Person(name) { this.name = name this.friends = ['Shelby', 'Court'] } Person.prototype.sayName = function() { console.log(this.name) } var person1 = new Person() var person2 = new Person() person1.friends.push('Van') console.log(person1.friends) //["Shelby", "Court", "Van"] console.log(person2.friends) // ["Shelby", "Court"] console.log(person1.friends === person2.friends) //false

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name) {
  this.name = name
  this.friends = ['Shelby', 'Court']
}
Person.prototype.sayName = function() {
  console.log(this.name)
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push('Van')
console.log(person1.friends)  //["Shelby", "Court", "Van"]
console.log(person2.friends) // ["Shelby", "Court"]
console.log(person1.friends === person2.friends) //false

动态原型方式

动态原型情势将全数音讯都封装在了结构函数中,初阶化的时候,通过检查测验某些应该留存的点卯时候使得,来决定是还是不是须要伊始化原型

function Person(name, job) { // 属性 this.name = name this.job = job // 方法 if(typeof this.sayName !== 'function') { Person.prototype.sayName = function() { console.log(this.name) } } } var person1 = new Person('Jiang', 'Student') person1.sayName()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Person(name, job) {
  // 属性
  this.name = name
  this.job = job
 
  // 方法
  if(typeof this.sayName !== 'function') {
    Person.prototype.sayName = function() {
       console.log(this.name)
    }
  }
 
}
var person1 = new Person('Jiang', 'Student')
person1.sayName()

唯有在sayName方法海市蜃楼的时候,才会将它加多到原型中。这段代码只会首先调用结构函数的时候才会实行。

之后原型已经达成开头化,无需在做哪些改进了

这里对原型所做的改变,能够即时在享有实例中获取反映

附带,if语句检查的能够是初叶化之后应该留存的任何性质或方法,所以不必用第一次全国代表大会堆的if语句检查每四个脾性和办法,只要检查三个就能够

寄生布局函数格局

这种情势的为主考虑正是创立贰个函数,该函数的功用只是是包装创制对象的代码,然后再回去新建的指标

function Person(name, job) { var o = new Object() o.name = name o.job = job o.sayName = function() { console.log(this.name) } return o } var person1 = new Person('Jiang', 'student') person1.sayName()

1
2
3
4
5
6
7
8
9
10
11
function Person(name, job) {
  var o = new Object()
  o.name = name
  o.job = job
  o.sayName = function() {
    console.log(this.name)
  }
  return o
}
var person1 = new Person('Jiang', 'student')
person1.sayName()

其一形式,除了选拔new操作符并把利用的卷入函数叫做布局函数之外,和工厂形式大致千篇风度翩翩律

构造函数假设不回去对象,暗许也会再次来到三个新的靶子,通过在布局函数的末梢增添一个return语句,能够重写调用布局函数时再次回到的值

伏贴构造函数方式

先是知道妥善对象指的是未有集体性质,何况其情势也不引用this。

妥帖对象最相符在局地康宁条件中(那些条件会制止行使this和new),或防止数据被其余应用程序改造时采取

伏贴布局函数方式和寄生方式形似,有两点分化:一是创立对象的实例方法不引用this,而是不选拔new操作符调用构造函数

function Person(name, job) { var o = new Object() o.name = name o.job = job o.sayName = function() { console.log(name) } return o } var person1 = Person('Jiang', 'student') person1.sayName()

1
2
3
4
5
6
7
8
9
10
11
function Person(name, job) {
  var o = new Object()
  o.name = name
  o.job = job
  o.sayName = function() {
    console.log(name)
  }
  return o
}
var person1 = Person('Jiang', 'student')
person1.sayName()

和寄生结构函数方式相像,那样创造出来的指标与布局函数之间从未什么关联,instanceof操作符对她们不曾意思

1 赞 4 收藏 评论

图片 2

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com,转载请注明出处:通过Object构造函数或对象字面量的方式也可以创

关键词: mg娱乐游戏 JavaScript

上一篇:)对象与原生(

下一篇:没有了