焱_dd40
焱_dd40

彻底搞懂js原型

引言

如果不处理对象，您就无法在 JavaScript 方面取得很大进展。它们几乎是 JavaScript 编程语言的所有方面的基础。在这篇文章中，您将了解用于实例化新对象的各种模式，在此过程中，您将逐步深入了解 JavaScript 的原型。

基础入门

如果不处理对象，您就无法在 JavaScript 方面取得很大进展。它们几乎是 JavaScript 编程语言的所有方面的基础。事实上，学习如何创建对象可能是你刚开始学习的第一件事。话虽如此，为了最有效地学习 JavaScript 中的原型，我们将从基础开始。

首先，对象是键/值对。创建对象的最常用方法是使用花括号{}，并使用点表示法向对象添加属性和方法。

JavaScript 代码:

let animal = {}
animal.name = 'Leo'
animal.energy = 10
 
animal.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}
 
animal.sleep = function (length) {
  console.log(`${this.name} is sleeping.`)
  this.energy += length
}
 
animal.play = function (length) {
  console.log(`${this.name} is playing.`)
  this.energy -= length
}

这个很简单。现在，我们在应用程序中我们需要创建多个动物。很自然地，下一步就是将逻辑封装到一个函数中，以便我们在需要创建新动物时调用这个函数。我们将调用这个模式 Functional Instantiation(函数实例化)，并将函数本身称为 constructor function(构造函数) ，因为它负责“构造”一个新对象。

Functional Instantiation (函数实例化)

JavaScript 代码:

function Animal (name, energy) {
  let animal = {}
  animal.name = name
  animal.energy = energy
 
  animal.eat = function (amount) {
    console.log(`${this.name} is eating.`)
    this.energy += amount
  }
 
  animal.sleep = function (length) {
    console.log(`${this.name} is sleeping.`)
    this.energy += length
  }
 
  animal.play = function (length) {
    console.log(`${this.name} is playing.`)
    this.energy -= length
  }
 
  return animal
}
 
const leo = Animal('Leo', 7)
const snoop = Animal('Snoop', 10)

现在，每当我们想要创建一种新动物（或者更广泛地说是一种新的“实例”）时，我们所要做的就是调用我们的 Animal 函数，将动物的 name 和energy 传递给这个函数。这非常有效，而且非常简单。但是，你有发现这种模式的不足之处吗？我们要尝试解决的最大的问题与三种方法有关 – eat，sleep 和 play。这些方法中的每一种都不仅是动态的，而且它们也是完全通用的。这意味着没有理由重新创建这些方法，正如我们在创建新动物时所做的那样。我们只是在浪费内存，让每个动物物体都比它需要的更大。你能想到一个解决方案吗？
如果我们每次创建一个新动物时不需要重新创建这些方法，而是将它们移动到它们自己的对象上，那么我们就可以让每个动物引用那个对象了?我们可以把这种模式称为 Functional Instantiation with Shared Methods(共享方法的函数实例化) 。描述起来有点啰嗦

Functional Instantiation with Shared Methods (共享方法的函数实例化)

JavaScript 代码:

const animalMethods = {
  eat(amount) {
    console.log(`${this.name} is eating.`)
    this.energy += amount
  },
  sleep(length) {
    console.log(`${this.name} is sleeping.`)
    this.energy += length
  },
  play(length) {
    console.log(`${this.name} is playing.`)
    this.energy -= length
  }
}
 
function Animal (name, energy) {
  let animal = {}
  animal.name = name
  animal.energy = energy
  animal.eat = animalMethods.eat
  animal.sleep = animalMethods.sleep
  animal.play = animalMethods.play
 
  return animal
}
 
const leo = Animal('Leo', 7)
const snoop = Animal('Snoop', 10)

通过将共享方法移动到它们自己的对象并在 Animal 函数中引用该对象，我们现在已经解决了内存浪费和动物对象过大的问题。

Object.create

让我们使用 Object.create 再次改进我们的例子。 简而言之，Object.create 允许您创建一个对象，该对象将在查找失败时委托给另一个对象。 换句话说，Object.create 允许您创建一个对象，只要该对象上的属性查找失败，它就可以查询另一个对象，以查看另一个对象中是否具有该属性。 说清楚需要很多文字， 我们来看一些代码。

const parent = {
  name: 'Stacey',
  age: 35,
  heritage: 'Irish'
}
 
const child = Object.create(parent)
child.name = 'Ryan'
child.age = 7
 
console.log(child.name) // Ryan
console.log(child.age) // 7
console.log(child.heritage) // Irish

在上面的示例中，因为 child 是通过 Object.create(parent) 创建的，所以每当在 child 中查找属性失败时，JavaScript 就会将该查找委托给 parent 对象。这意味着即使 child 没有 heritage 属性，当你查找 child.heritage 时你会得到 parent 的heritage 属性，即 Irish。

现在，通过使用 Object.create ，我们该如何使用它来简化之前的 Animal 代码呢？好吧，我们可以使用 Object.create 委托给animalMethods 对象，而不是像我们之前一样逐个将所有共享方法添加到 Animal 中。 为了听起来很智能，让我们称之为 Functional Instantiation with Shared Methods and Object.create(使用共享方法和Object.create进行函数实例化)

Functional Instantiation with Shared Methods and Object.create (使用共享方法和Object.create进行函数实例化)

const animalMethods = {
  eat(amount) {
    console.log(`${this.name} is eating.`)
    this.energy += amount
  },
  sleep(length) {
    console.log(`${this.name} is sleeping.`)
    this.energy += length
  },
  play(length) {
    console.log(`${this.name} is playing.`)
    this.energy -= length
  }
}
 
function Animal (name, energy) {
  let animal = Object.create(animalMethods)
  animal.name = name
  animal.energy = energy
 
  return animal
}
 
const leo = Animal('Leo', 7)
const snoop = Animal('Snoop', 10)
 
leo.eat(10)
snoop.play(5)

所以现在当我们调用 leo.eat 时，JavaScript 会在 leo 对象上查找 eat 方法。 这个查找将失败，因为使用了 Object.create，它将委托给 animalMethods 对象，然后在这里将找到 eat 方法。

到现在为止还挺好的。 尽管如此，我们仍然可以做出一些改进。 为了跨实例共享方法，必须管理一个单独的对象（animalMethods）似乎有点“hacky”。 这似乎是您希望在语言本身中实现的常见功能。 事实证明，这就是你看这篇文章的原因 – prototype(原型) 。

那么究竟什么是 JavaScript 的 prototype（原型）呢？ 简单地说，JavaScript 中的每个函数都有一个引用对象的 prototype 属性。 我们来亲自测试一下。

function doThing () {}
console.log(doThing.prototype) // {}

如果不是创建一个单独的对象（比如我们正在使用的 animalMethods ）来管理我们的方法，也就是我们只是将每个方法放在 Animal 函数的 prototype(原型) 对象上，该怎么办呢？我们所要做的就是不使用 Object.create 委托给 animalMethods，我们可以用使用来委托Animal.prototype。 我们将这种模式称为 Prototypal Instantiation(原型实例化)。

Prototypal Instantiation (原型实例化)

function Animal (name, energy) {
  let animal = Object.create(Animal.prototype)
  animal.name = name
  animal.energy = energy
 
  return animal
}
 
Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}
 
Animal.prototype.sleep = function (length) {
  console.log(`${this.name} is sleeping.`)
  this.energy += length
}
 
Animal.prototype.play = function (length) {
  console.log(`${this.name} is playing.`)
  this.energy -= length
}
 
const leo = Animal('Leo', 7)
const snoop = Animal('Snoop', 10)
 
leo.eat(10)
snoop.play(5)

这里你可以为自己鼓掌鼓励一下了。 同样，原型只是 JavaScript 中每个函数都具有的属性，并且如上所述，它允许我们在函数的所有实例之间共享方法。 我们所有的功能仍然相同，但现在我们不必为所有方法管理一个单独的对象，我们可以使用另一个内置于 Animal 函数本身的对象Animal.prototype

更深的，走起！

首先，我们需要知道三件事：

  1. 如何创建构造函数。
  2. 如何将方法添加到构造函数的原型中。
  3. 如何使用 Object.create 将失败的查找委托给函数的原型。

这三个任务似乎是任何编程语言的基础。 JavaScript 是否真的那么糟糕，没有更简单，“内置”的方式来完成同样的事情？ 正如你可能已经猜测的那样，它是通过使用 new 关键字。

我们采用的这种缓慢而有条理的方法的好处是，您现在可以深入了解 JavaScript 中的 new 关键字在幕后的作用。

回顾一下我们的 Animal 构造函数，最重要的两个部分是创建对象并返回它。 如果不使用 Object.create创建对象，我们将无法在查找失败时委托给函数的原型。 如果没有 return 语句，我们将永远不会返回创建的对象。

function Animal (name, energy) {
  let animal = Object.create(Animal.prototype)
  animal.name = name
  animal.energy = energy
 
  return animal
}

new 有一个很酷的地方——当您使用 new 关键字调用函数时，注释掉的这两行代码是隐式(引擎)完成的，创建的对象称为 this。

使用注释来显示在幕后发生的事情并假设使用 new 关键字调用 Animal 构造函数，可以将其重写为这样：

JavaScript 代码:

function Animal (name, energy) {
  // const this = Object.create(Animal.prototype)
 
  this.name = name
  this.energy = energy
 
  // return this
}
 
const leo = new Animal('Leo', 7)
const snoop = new Animal('Snoop', 10)

去掉注释后：

JavaScript 代码:

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}
 
Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}
 
Animal.prototype.sleep = function (length) {
  console.log(`${this.name} is sleeping.`)
  this.energy += length
}
 
Animal.prototype.play = function (length) {
  console.log(`${this.name} is playing.`)
  this.energy -= length
}
 
const leo = new Animal('Leo', 7)
const snoop = new Animal('Snoop', 10)

同样，这样做以及为我们创建 this 对象的原因是，我们使用 new 关键字调用构造函数。如果在调用函数时不使用 new ，则该对象永远不会创建，也不会隐式返回。我们可以在下面的例子中看到这个问题。

JavaScript 代码:

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}
 
const leo = Animal('Leo', 7)
console.log(leo) // undefined

此模式的名称是 Pseudoclassical Instantiation(伪类实例化) 。

如果 JavaScript 不是您的第一种编程语言，您可能会有点不安。

“WTF这个家伙只是重新创造了一个更糟糕的版本” – 你

对于那些不熟悉的人，Class(类) 允许您为对象创建模板。然后，无论何时创建该类的实例，都会获得一个具有模板中定义的属性和方法的对象。

听起来有点熟悉？这基本上就是我们对上面的 Animal 构造函数所做的事情。但是对于 Animal 构造函数，我们只使用常规的旧 JavaScript 函数来重新创建相同的功能，而不是使用 class 关键字。当然，它需要一些额外的工作以及一些关于 JavaScript “引擎” 所处理的事情的相关知识，但结果是一样的。

这是个好消息。 JavaScript 不是一种 “死” 语言。它不断得到改进，并由 TC-39委员会 不断的制定标准。这意味着即使 JavaScript 的初始版本不支持类，也不影响后续将它们添加到官方规范中。事实上，这正是TC-39委员会所做的事情。 2015年，发布了 EcmaScript（官方JavaScript规范）6 ，支持 Classes(类) 和 class 关键字。让我们看看上面的 Animal 构造函数如何使用新的 class(类) 语法。

class Animal {
  constructor(name, energy) {
    this.name = name
    this.energy = energy
  }
  eat(amount) {
    console.log(`${this.name} is eating.`)
    this.energy += amount
  }
  sleep(length) {
    console.log(`${this.name} is sleeping.`)
    this.energy += length
  }
  play(length) {
    console.log(`${this.name} is playing.`)
    this.energy -= length
  }
}
 
const leo = new Animal('Leo', 7)
const snoop = new Animal('Snoop', 10)

很干净是吧？

因此，如果这是创建类的新方法，为什么我们前面花了这么多时间来讨论旧的方式呢？ 原因是新的方式（使用 class 关键字）只是经典伪类模式的 “语法糖”。 为了完全理解 ES6 类的便捷语法，首先必须理解经典的伪类模式。

我们已经介绍了 JavaScript 原型的基础知识。 本文的其余部分将致力于加深理解相关知识的主题。 在另一篇文章中，我们将看看如何利用这些基础知识并使用它们来理解 JavaScript 中继承的工作原理。

数组方法

我们在上面深入讨论了如何在类的实例之间共享方法，您应该将这些方法放在类（或函数）原型上。 如果我们查看 Array 类，我们可以看到相同的模式。 从历史上看，您可能已经创建了这样的数组：

JavaScript 代码:

const friends = []

事实证明，这只是创建一个新的 Array 类实例的语法糖。

JavaScript 代码:

const friendsWithSugar = [] 
const friendsWithoutSugar = new Array()

您可能从未想过：数组的每个实例是如何具有所有内置方法的（splice , slice, pop 等）？

正如您现在所知，这是因为这些方法存在于 Array.prototype 上，当您创建一个新的 Array 实例时，您使用 new 关键字在查找失败时将该委托设置为 Array.prototype 。

我们可以通过简单地 console.log(Array.prototype) 来查看所有数组的方法。

JavaScript 代码:

onsole.log(Array.prototype)
 
/*
  concat: ?n concat()
  constructor: ?n Array()
  copyWithin: ?n copyWithin()
  entries: ?n entries()
  every: ?n every()
  fill: ?n fill()
  filter: ?n filter()
  find: ?n find()
  findIndex: ?n findIndex()
  forEach: ?n forEach()
  includes: ?n includes()
  indexOf: ?n indexOf()
  join: ?n join()
  keys: ?n keys()
  lastIndexOf: ?n lastIndexOf()
  length: 0n
  map: ?n map()
  pop: ?n pop()
  push: ?n push()
  reduce: ?n reduce()
  reduceRight: ?n reduceRight()
  reverse: ?n reverse()
  shift: ?n shift()
  slice: ?n slice()
  some: ?n some()
  sort: ?n sort()
  splice: ?n splice()
  toLocaleString: ?n toLocaleString()
  toString: ?n toString()
  unshift: ?n unshift()
  values: ?n values()
*/

Objects(对象) 也是完全相同的逻辑。 所有对象将在查找失败时委托给 Object.prototype ，这就是所有对象都有 toString 和hasOwnProperty 等方法的原因。

静态方法

到目前为止，我们已经介绍了为什么，以及如何在类的实例之间共享方法。 但是，如果我们有一个对 Class 很重要但不需要又跨实例共享的方法，该怎么办呢？ 例如，如果我们有一个函数，它接收一系列 Animal 实例并决定下一个需要喂食的对象，会怎样? 我们将其称为 nextToEat。

JavaScript 代码:

function nextToEat (animals) {
  const sortedByLeastEnergy = animals.sort((a,b) => {
    return a.energy - b.energy
  })
 
  return s

我们不希望在所有实例之间共享它，所以在 Animal.prototype 上使用 nextToEat 是没有意义的。 相反，我们可以将其视为辅助方法。 所以如果 nextToEat 不应该存在于 Animal.prototype 中，我们应该把它放在哪里呢？ 那么显而易见的答案是我们可以将 nextToEat 放在与 Animal 类相同的作用域中，然后像我们平常那样，在需要时引用它。

JavaScript 代码:

class Animal {
  constructor(name, energy) {
    this.name = name
    this.energy = energy
  }
  eat(amount) {
    console.log(`${this.name} is eating.`)
    this.energy += amount
  }
  sleep(length) {
    console.log(`${this.name} is sleeping.`)
    this.energy += length
  }
  play(length) {
    console.log(`${this.name} is playing.`)
    this.energy -= length
  }
}
 
function nextToEat (animals) {
  const sortedByLeastEnergy = animals.sort((a,b) => {
    return a.energy - b.energy
  })
 
  return sortedByLeastEnergy[0].name
}
 
const leo = new Animal('Leo', 7)
const snoop = new Animal('Snoop', 10)
 
console.log(nextToEat([leo, snoop])) // Leo

现在这可行，但有更好的方法。

只要有一个特定于类本身的方法，但不需要在该类的实例之间共享，就可以将其添加为类的 static(静态) 属性。

JavaScript 代码:

class Animal {
  constructor(name, energy) {
    this.name = name
    this.energy = energy
  }
  eat(amount) {
    console.log(`${this.name} is eating.`)
    this.energy += amount
  }
  sleep(length) {
    console.log(`${this.name} is sleeping.`)
    this.energy += length
  }
  play(length) {
    console.log(`${this.name} is playing.`)
    this.energy -= length
  }
  static nextToEat(animals) {
    const sortedByLeastEnergy = animals.sort((a,b) => {
      return a.energy - b.energy
    })
 
    return sortedByLeastEnergy[0].name
  }
}

现在，因为我们在类上添加了 nextToEat 作为 static(静态) 属性，所以它存在于 Animal 类本身（而不是它的原型）中，并且可以使用 Animal.nextToEat 进行访问。

JavaScript 代码:

const leo = new Animal('Leo', 7)
const snoop = new Animal('Snoop', 10)
 
console.log(Animal.nextToEat([leo, snoop])) // Leo

因为我们在这篇文章中都遵循了类似的模式，让我们来看看如何使用 ES5 完成同样的事情。 在上面的例子中，我们看到了如何使用 static 关键字将方法直接放在类本身上。 使用ES5，同样的模式就像手动将方法添加到函数对象一样简单。

JavaScript 代码:

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}
 
Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}
 
Animal.prototype.sleep = function (length) {
  console.log(`${this.name} is sleeping.`)
  this.energy += length
}
 
Animal.prototype.play = function (length) {
  console.log(`${this.name} is playing.`)
  this.energy -= length
}
 
Animal.nextToEat = function (nextToEat) {
  const sortedByLeastEnergy = animals.sort((a,b) => {
    return a.energy - b.energy
  })
 
  return sortedByLeastEnergy[0].name
}
 
const leo = new Animal('Leo', 7)
const snoop = new Animal('Snoop', 10)
 
console.log(Animal.nextToEat([leo, snoop])) // Leo

获取对象的原型

无论您使用哪种模式创建对象，都可以使用 Object.getPrototypeOf 方法完成获取该对象的原型。

JavaScript 代码:

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}
 
Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}
 
Animal.prototype.sleep = function (length) {
  console.log(`${this.name} is sleeping.`)
  this.energy += length
}
 
Animal.prototype.play = function (length) {
  console.log(`${this.name} is playing.`)
  this.energy -= length
}
 
const leo = new Animal('Leo', 7)
const prototype = Object.getPrototypeOf(leo)
 
console.log(prototype)
// {constructor: ?, eat: ?, sleep: ?, play: ?}
 
prototype === Animal.prototype // true

上面的代码有两个要点。

首先，你会注意到 proto 是一个对象，有4种方法，constructor，eat，sleep，和play。那讲得通。我们将实例传递给getPrototypeOf，leo 获取了实例的原型，这里是所有的方法。这提示我们，关于原型的另外一件事我们还没有讨论过。默认情况下，原型对象将具有 constructor 属性，该属性指向原始函数或创建实例的类。这也意味着 JavaScript 默认在原型上放置 constructor 属性，所以任何实例都可以通过 instance.constructor 访问它们的构造函数。

上面的第二个要点是 Object.getPrototypeOf(leo) === Animal.prototype 。这也是有道理的。 Animal 构造函数有一个 prototype(原型) 属性，我们可以在所有实例之间共享方法，getPrototypeOf 允许我们查看实例本身的原型。

JavaScript 代码:

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}
 
const leo = new Animal('Leo', 7)
console.log(leo.constructor) // Logs the constructor function

为了配合我们之前使用 Object.create 所讨论的内容，其工作原因是因为任何 Animal 实例都会在查找失败时委托给 Animal.prototype。 因此，当您尝试访问 leo.prototype 时， leo 没有 prototype 属性，因此它会将该查找委托给Animal.prototype，它确实具有 constructor 属性。 如果这段没有看懂，请回过头来阅读上面的 Object.create 。

您可能以前看到过使用 proto 获取实例的原型。 这是过去的遗物。 现在，如上所述使用 Object.getPrototypeOf(instance) 获取实例的原型。

确定属性是否存在于原型上

在某些情况下，您需要知道属性是否存在于实例本身上，还是存在于对象委托的原型上。 我们可以通过循环我们创建的 leo 对象来知道这一点。假设目标是循环 leo 并记录其所有键和值。使用 for in 循环，可能看起来像这样。

JavaScript 代码:

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}
 
Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}
 
Animal.prototype.sleep = function (length) {
  console.log(`${this.name} is sleeping.`)
  this.energy += length
}
 
Animal.prototype.play = function (length) {
  console.log(`${this.name} is playing.`)
  this.energy -= length
}
 
const leo = new Animal('Leo', 7)
 
for(let key in leo) {
  console.log(`Key: ${key}. Value: ${leo[key]}`)
}

你期望看到什么？最有可能的是，它是这样的 –

JavaScript 代码:

Key: name. Value: Leo
Key: energy. Value: 7

但是，如果你运行代码，你看到的是这样的 –

JavaScript 代码:

Key: name. Value: Leo
Key: energy. Value: 7
Key: eat. Value: function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}
Key: sleep. Value: function (length) {
  console.log(`${this.name} is sleeping.`)
  this.energy += length
}
Key: play. Value: function (length) {
  console.log(`${this.name} is playing.`)
  this.energy -= length
}

这是为什么？ for in 循环将循环遍历对象本身以及它所委托的原型的所有 可枚举属性 。 因为默认情况下，您添加到函数原型的任何属性都是可枚举的，我们不仅会看到name 和 energy ，还会看到原型上的所有方法 – eat，sleep 和 play 。 要解决这个问题，我们需要指定所有原型方法都是不可枚举的，或者如果属性在 leo 对象本身上而不是 leo 查找失败时委托给的原型上。 hasOwnProperty 可以帮助我们实现这个需求。

hasOwnProperty 是每个对象上的一个属性，它返回一个布尔值，指示对象是否具有指定的属性作为其自身的属性，而不是对象委托给的原型。 这正是我们所需要的。 现在有了这些新知识，我们可以修改我们的代码，以便利用 for in 循环中的 hasOwnProperty 。

JavaScript 代码:

const leo = new Animal('Leo', 7)
 
for(let key in leo) {
  if (leo.hasOwnProperty(key)) {
    console.log(`Key: ${key}. Value: ${leo[key]}`)
  }
}

而现在我们看到的只是 leo 对象本身的属性，而不是 leo 原型中的方法。

JavaScript 代码:

Key: name. Value: Leo
Key: energy. Value: 7

如果你仍然对 hasOwnProperty 感到困惑，这里有一些代码可以帮你消除困惑。

JavaScript 代码:

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}
 
Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}
 
Animal.prototype.sleep = function (length) {
  console.log(`${this.name} is sleeping.`)
  this.energy += length
}
 
Animal.prototype.play = function (length) {
  console.log(`${this.name} is playing.`)
  this.energy -= length
}
 
const leo = new Animal('Leo', 7)
 
leo.hasOwnProperty('name') // true
leo.hasOwnProperty('energy') // true
leo.hasOwnProperty('eat') // false
leo.hasOwnProperty('sleep') // false
leo.hasOwnProperty('play') // false

检查对象是否是类的实例

有时您想知道对象是否是指定类的实例。 为此，您可以使用 instanceof 运算符。 用例非常简单，但如果您以前从未见过它，实际的语法有点奇怪。 它的工作原理如下

JavaScript 代码:

object instanceof Class

如果 object 是 Class 的实例，则上面的语句将返回 true ，否则返回 false 。回到我们的 Animal 示例，我们会有类似的东西。

JavaScript 代码:

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}
 
function User () {}
 
const leo = new Animal('Leo', 7)
 
leo instanceof Animal // true
leo instanceof User // false

instanceof 的工作方式是检查对象原型链中是否存在 constructor.prototype 。 在上面的例子中，leo instanceof Animal 为 true ，因为Object.getPrototypeOf(leo) === Animal.prototype。 另外，leo instanceof User 为 false ，因为 Object.getPrototypeOf(leo) !== User.prototype。

创建新的不可知构造函数

你能发现下面代码中的错误吗？

JavaScript 代码:

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}

即使是经验丰富的 JavaScript 开发人员有时也会因为上面的例子而被绊倒。 因为我们正在使用之前学过的 pseudoclassical pattern(经典伪类模式)，所以当调用 Animal 构造函数时，我们需要确保使用 new 关键字调用它。 如果我们不这样做，则不会创建 this 关键字，也不会隐式返回。

作为复习，注释掉的行是在函数上使用 new 关键字时幕后所做的事情。

JavaScript 代码:

function Animal (name, energy) {
  // const this = Object.create(Animal.prototype)
 
  this.name = name
  this.energy = energy
 
  // return this
}

这似乎是一个非常重要的细节，让其他开发人员记住。 假设我们正在与其他开发人员合作，有没有办法确保我们的 Animal 构造函数始终使用 new 关键字调用呢？ 事实证明，它是通过使用我们之前学到的 instanceof 运算符来实现的。

如果使用 new 关键字调用构造函数，那么构造函数体的内部将是构造函数本身的实例。 那是很多文字才能说清楚的。 这是一些代码。

JavaScript 代码:

function Animal (name, energy) {
  if (this instanceof Animal === false) {
    console.warn('Forgot to call Animal with the new keyword')
  }
 
  this.name = name
  this.energy = energy
}

现在，如果我们使用 new 关键字重新调用函数，而不是只向函数的使用者打印警告，会发生什么呢？

JavaScript 代码:

function Animal (name, energy) {
  if (this instanceof Animal === false) {
    return new Animal(name, energy)
  }
 
  this.name = name
  this.energy = energy
}

现在无论是否使用 new 关键字调用 Animal，它都可以正常工作。

重新创建 Object.create

在这篇文章中，我们非常依赖于 Object.create 来创建委托给构造函数原型的对象。 此时，您应该知道如何在代码中使用 Object.create ，但您可能没有想到的一件事是Object.create 实际上是如何工作的。 为了让您真正了解 Object.create 的工作原理，我们将重新创建它。 首先，我们对 Object.create 的工作原理了解多少？

  1. 它接受一个对象作为参数。
  2. 它创建一个对象，该对象在查找失败时委托给参数对象。
  3. 它返回新创建的对象。

让我们从第1点开始吧。

JavaScript 代码:

Object.create = function (objToDelegateTo) { }

很简单。

现在第2点 – 我们需要创建一个对象，该对象将在查找失败时委托给参数对象。 这个有点棘手。 为此，我们将使用我们对 new 关键字和原型如何在 JavaScript 中工作的知识。首先，在 Object.create 实现的主体中，我们将创建一个空函数。 然后，我们将该空函数的原型设置为参数对象。然后，为了创建一个新对象，我们将使用 new 关键字调用空函数。如果我们返回新创建的对象，也会完成第3点。

JavaScript 代码:

Object.create = function (objToDelegateTo) {
  function Fn(){}
  Fn.prototype = objToDelegateTo
  return

有点野蛮是吧？让我们来看看吧。

当我们在上面的代码中创建一个新函数 Fn 时，它带有一个 prototype 属性。 当我们使用 new 关键字调用它时，我们知道我们将得到的是一个对象，该对象将在查找失败时委托给函数的原型。 如果我们覆盖函数的原型，那么我们可以决定在查找失败时委托给哪个对象。 所以在我们上面的例子中，我们用调用 Object.create 时传入的对象覆盖 Fn的原型，我们称之为 objToDelegateTo。

请注意，我们只支持 Object.create 的单个参数。官方实现还支持第二个可选参数，该参数允许您向创建的对象添加更多属性。

箭头函数

箭头函数没有自己的 this 关键字。因此，箭头函数不能用于构造函数，如果您尝试使用 new 关键字调用箭头函数，它将抛出错误。

JavaScript 代码:

const Animal = () => {} 
const leo = new Animal() // Error: Animal is not a constructor

另外，因为我们在上面证明了 pseudoclassical pattern(经典伪类模式) 不能与箭头函数一起使用，所以箭头函数也没有 prototype(原型) 属性。

JavaScript 代码:

const Animal = () => {}
console.log(Animal.prototype) // undefined

你可能感兴趣的:(彻底搞懂js原型)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • C#中使用split分割字符串 互联网打工人no1 c#
    1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc
  • 【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java算法华为javascript
    华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
  • 数组去重 好奇的猫猫猫
    整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
  • 【JS】执行时长(100分) |思路参考+代码解析（C++） l939035548 JS算法数据结构c++
    题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • docker igotyback eureka云原生
    Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
  • 在Ubuntu中编译含有JSON的文件出现报错 芝麻糊76 Linuxkill_buglinuxubuntujson
    在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"
  • Xinference如何注册自定义模型 玩人工智能的辣条哥 人工智能AI大模型Xinference
    环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
  • 如何在心上用功？ 余超林AIA财富管家
    思考：如何在心上用功？学习心得：心-道-德-事的理解心-道-德-事这四部曲，本质上就是一个人的思维智慧的四个层面：事是最底层，这是所有人在这个社会谋求生存的基础，一个人能够把事情彻底做好，保质保量的完成，才会有真正的结果，但是这个层面要获得真正成功很困难，因为会做事的人很多，最终会出现恶性竞争；德是第三层，如果说整个社会做事的竞争激烈程度为100%，那么上升到德上的竞争激烈程度降低为80%，德是一
  • Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python开发语言
    一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
  • 2018-12-22 《金刚经修心课：不焦虑的活法》摘录 Cintia1004
    不为外界干扰的神奇力量如果你即将开始阅读金刚经，请试着把你的心空下来，把你各种习惯性的想法放在一边，以一种敞开的心态去阅读它。在敞开的阅读里，你会慢慢领悟到，金刚经没有任何结论，只是一种启迪，一种指引，指引你彻底地自我解放，从一切的成见里解放出来。你会惊奇地发现，金刚经……你都能够获得一种不为外界干扰的平静的力量。当这种力量充满你的日常生活，你会不害怕失败，……没有得到的时候，想要得到；已经得到的
  • Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net 佛一脚 errorreactmongodb数据库
    背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不
  • Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.jsvue-cli3
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
  • 更改npm镜像源为淘宝镜像 骆小骆 基于node.js
    npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de
  • COCO 格式的数据集转化为 YOLO 格式的数据集 QYQY77 YOLOpython
    """--json_path输入的json文件路径--save_path保存的文件夹名字，默认为当前目录下的labels。"""importosimportjsonfromtqdmimporttqdmimportargparseparser=argparse.ArgumentParser()parser.add_argument('--json_path',default='./instances
  • JAVA学习笔记之23种设计模式学习 victorfreedom Java技术设计模式androidjava常用设计模式
    博主最近买了《设计模式》这本书来学习，无奈这本书是以C++语言为基础进行说明，整个学习流程下来效率不是很高，虽然有的设计模式通俗易懂，但感觉还是没有充分的掌握了所有的设计模式。于是博主百度了一番，发现有大神写过了这方面的问题，于是博主迅速拿来学习。一、设计模式的分类总体来说设计模式分为三大类：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式，共七种：适配器
  • NPM私库搭建-verdaccio（Linux） Beam007 npmlinux前端
    1、安装nodelinux服务器安装nodea)、官网下载所需的node版本https://nodejs.org/dist/v14.21.0/b)、解压安装包若下载的是xxx.tar.xz文件，解压命令为tar-xvfxxx.tar.xzc)、修改环境变量修改：/etc/profile文件#SETPATHFORNODEJSexportNODE_HOME=NODEJS解压安装的路径exportPAT
  • 浅谈MapReduce Android路上的人 Hadoop分布式计算mapreduce分布式框架hadoop
    从今天开始，本人将会开始对另一项技术的学习，就是当下炙手可热的Hadoop分布式就算技术。目前国内外的诸多公司因为业务发展的需要，都纷纷用了此平台。国内的比如BAT啦，国外的在这方面走的更加的前面，就不一一列举了。但是Hadoop作为Apache的一个开源项目，在下面有非常多的子项目，比如HDFS，HBase,Hive，Pig,等等，要先彻底学习整个Hadoop，仅仅凭借一个的力量，是远远不够的。
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • golang获取用户输入的几种方式 余生逆风飞翔 golang开发语言后端
    一、定义结构体typeUserInfostruct{Namestring`json:"name"`Ageint`json:"age"`Addstring`json:"add"`}typeReturnDatastruct{Messagestring`json:"message"`Statusstring`json:"status"`DataUserInfo`json:"data"`}二、get请求的
  • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。 焚木灵 node.jsvue
    可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
  • Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘ 周bro vue.js前端javascriptnode.jsnpm
    node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本[email protected]执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
  • 一文让你彻底搞懂什么是VR、AR、AV、MR 码上飞扬 vrarmrav
    随着科技的飞速发展，现实世界与虚拟世界的界限变得越来越模糊。各种与现实增强相关的技术如雨后春笋般涌现，令人眼花缭乱。本文将为你详细解读四种常见的现实增强技术：虚拟现实（VR）、增强现实（AR）、混合现实（MR）和增强虚拟（AV），让你彻底搞懂它们之间的区别与联系。一、虚拟现实（VR）1.什么是VR？虚拟现实（VirtualReality，简称VR）是一种通过计算机模拟生成的三维环境，使用户能够沉浸
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • 辗转相处求最大公约数 沐刃青蛟 C++漏洞
    无言面对”江东父老“了，接触编程一年了，今天发现还不会辗转相除法求最大公约数。惭愧惭愧！   为此，总结一下以方便日后忘了好查找。   1.输入要比较的两个数a,b   忽略：2.比较大小（因为后面要的是大的数对小的数做%操作）   3.辗转相除（用循环不停的取余，如a%b,直至b=0）   4.最后的a为两数的最大公约数 &
  • F5负载均衡会话保持技术及原理技术白皮书 bijian1013 F5负载均衡
    一.什么是会话保持？        在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中，一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成。由于这几次交互过程是密切相关的，服务器在进行这些交互过程的某一个交互步骤时，往往需要了解上一次交互过程的处理结果，或者上几步的交互过程结果，服务器进行下
  • Object.equals方法：重载还是覆盖 Cwind javagenericsoverrideoverload
    本文译自StackOverflow上对此问题的讨论。 原问题链接   在阅读Joshua Bloch的《Effective Java（第二版）》第8条“覆盖equals时请遵守通用约定”时对如下论述有疑问： “不要将equals声明中的Object对象替换为其他的类型。程序员编写出下面这样的equals方法并不鲜见，这会使程序员花上数个小时都搞不清它为什么不能正常工作：” pu
  • 初始线程 15700786134
          暑假学习的第一课是讲线程，任务是是界面上的一条线运动起来。            既然是在界面上，那必定得先有一个界面，所以第一步就是，自己的类继承JAVA中的JFrame，在新建的类中写一个界面，代码如下： public class ShapeFr
  • Linux的tcpdump 被触发 tcpdump
    用简单的话来定义tcpdump，就是：dump the traffic on a network，根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支 持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。 实用命令实例 默认启动 tcpdump 普通情况下，直
  • 安卓程序listview优化后还是卡顿 肆无忌惮_ ListView
    最近用eclipse开发一个安卓app，listview使用baseadapter，里面有一个ImageView和两个TextView。使用了Holder内部类进行优化了还是很卡顿。后来发现是图片资源的问题。把一张分辨率高的图片放在了drawable-mdpi文件夹下，当我在每个item中显示，他都要进行缩放，导致很卡顿。解决办法是把这个高分辨率图片放到drawable-xxhdpi下。 &nb
  • 扩展easyUI tab控件，添加加载遮罩效果 知了ing jquery
    (function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs(&
  • gradle上传jar到nexus 矮蛋蛋 gradle
    原文地址： https://docs.gradle.org/current/userguide/maven_plugin.html configurations {     deployerJars } dependencies {     deployerJars "org.apache.maven.wagon
  • 千万条数据外网导入数据库的解决方案。 alleni123 sqlmysql
    从某网上爬了数千万的数据，存在文本中。 然后要导入mysql数据库。 悲剧的是数据库和我存数据的服务器不在一个内网里面。。 ping了一下， 19ms的延迟。 于是下面的代码是没用的。 ps = con.prepareStatement(sql); ps.setString(1, info.getYear())............; ps.exec
  • JAVA IO InputStreamReader和OutputStreamReader 百合不是茶 JAVA.io操作 字符流
    这是第三篇关于java.io的文章了，从开始对io的不了解-->熟悉--->模糊，是这几天来对文件操作中最大的感受，本来自己认为的熟悉了的，刚刚在回想起前面学的好像又不是很清晰了，模糊对我现在或许是最好的鼓励 我会更加的去学 加油！： JAVA的API提供了另外一种数据保存途径，使用字符流来保存的，字符流只能保存字符形式的流   字节流和字符的难点：a,怎么将读到的数据
  • MO、MT解读 bijian1013 GSM
    MO= Mobile originate，上行，即用户上发给SP的信息。MT= Mobile Terminate，下行，即SP端下发给用户的信息； 上行:mo提交短信到短信中心下行:mt短信中心向特定的用户转发短信，你的短信是这样的，你所提交的短信，投递的地址是短信中心。短信中心收到你的短信后，存储转发，转发的时候就会根据你填写的接收方号码寻找路由，下发。在彩信领域是一样的道理。下行业务：由SP
  • 五个JavaScript基础问题 bijian1013 JavaScriptcallapplythisHoisting
    下面是五个关于前端相关的基础问题，但却很能体现JavaScript的基本功底。 问题1：Scope作用范围 考虑下面的代码：  (function() { var a = b = 5; })(); console.log(b); 什么会被打印在控制台上？  回答：         上面的代码会打印 5。 &nbs
  • 【Thrift二】Thrift Hello World bit1129 Hello world
    本篇，不考虑细节问题和为什么，先照葫芦画瓢写一个Thrift版本的Hello World，了解Thrift RPC服务开发的基本流程   1. 在Intellij中创建一个Maven模块，加入对Thrift的依赖，同时还要加上slf4j依赖，如果不加slf4j依赖，在后面启动Thrift Server时会报错 <dependency>
  • 【Avro一】Avro入门 bit1129 入门
    本文的目的主要是总结下基于Avro Schema代码生成，然后进行序列化和反序列化开发的基本流程。需要指出的是，Avro并不要求一定得根据Schema文件生成代码，这对于动态类型语言很有用。   1. 添加Maven依赖   <?xml version="1.0" encoding="UTF-8"?> <proj
  • 安装nginx+ngx_lua支持WAF防护功能 ronin47
    需要的软件:LuaJIT-2.0.0.tar.gz                   nginx-1.4.4.tar.gz          &nb
  • java-5.查找最小的K个元素-使用最大堆 bylijinnan java
    import java.util.Arrays; import java.util.Random; public class MinKElement { /** * 5.最小的K个元素 * I would like to use MaxHeap. * using QuickSort is also OK */ public static void
  • TCP的TIME-WAIT bylijinnan socket
    原文连接： http://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux.html 以下为对原文的阅读笔记 说明： 主动关闭的一方称为local end，被动关闭的一方称为remote end 本地IP、本地端口、远端IP、远端端口这一“四元组”称为quadruplet，也称为socket 1、TIME_WA
  • jquery ajax 序列化表单 coder_xpf Jquery ajax 序列化
       checkbox 如果不设定值，默认选中值为on；设定值之后，选中则为设定的值   <input type="checkbox" name="favor" id="favor" checked="checked"/> $("#favor&quo
  • Apache集群乱码和最高并发控制 cuisuqiang apachetomcat并发集群乱码
    都知道如果使用Http访问，那么在Connector中增加URIEncoding即可，其实使用AJP时也一样，增加useBodyEncodingForURI和URIEncoding即可。 最大连接数也是一样的，增加maxThreads属性即可，如下，配置如下： <Connector maxThreads="300" port="8019" prot
  • websocket dalan_123 websocket
    一、低延迟的客户端-服务器 和 服务器-客户端的连接 很多时候所谓的http的请求、响应的模式，都是客户端加载一个网页，直到用户在进行下一次点击的时候，什么都不会发生。并且所有的http的通信都是客户端控制的，这时候就需要用户的互动或定期轮训的，以便从服务器端加载新的数据。   通常采用的技术比如推送和comet（使用http长连接、无需安装浏览器安装插件的两种方式：基于ajax的长
  • 菜鸟分析网络执法官 dcj3sjt126com 网络
      最近在论坛上看到很多贴子在讨论网络执法官的问题。菜鸟我正好知道这回事情.人道"人之患好为人师" 手里忍不住,就写点东西吧. 我也很忙.又没有MM,又没有MONEY....晕倒有点跑题. OK,闲话少说,切如正题. 要了解网络执法官的原理. 就要先了解局域网的通信的原理. 前面我们看到了.在以太网上传输的都是具有以太网头的数据包. 
  • Android相对布局属性全集 dcj3sjt126com android
    RelativeLayout布局android:layout_marginTop="25dip" //顶部距离android:gravity="left" //空间布局位置android:layout_marginLeft="15dip //距离左边距 // 相对于给定ID控件android:layout_above 将该控件的底部置于给定ID的
  • Tomcat内存设置详解 eksliang jvmtomcattomcat内存设置
    Java内存溢出详解   一、常见的Java内存溢出有以下三种：   1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap（堆）溢出JVM在启动的时候会自动设置JVM Heap的值，其初始空间(即-Xms)是物理内存的1/64，最大空间(-Xmx)不可超过物理内存。 可以利用JVM提
  • Java6 JVM参数选项 greatwqs javaHotSpotjvmjvm参数JVM Options
    Java 6 JVM参数选项大全（中文版）   作者：Ken Wu Email: [email protected] 转载本文档请注明原文链接 http://kenwublog.com/docs/java6-jvm-options-chinese-edition.htm！   本文是基于最新的SUN官方文档Java SE 6 Hotspot VM Opt
  • weblogic创建JMC i5land weblogicjms
    进入 weblogic控制太 1.创建持久化存储 --Services--Persistant Stores--new--Create FileStores--name随便起--target默认--Directory写入在本机建立的文件夹的路径--ok 2.创建JMS服务器 --Services--Messaging--JMS Servers--new--name随便起--Pers
  • 基于 DHT 网络的磁力链接和BT种子的搜索引擎架构 justjavac DHT
    上周开发了一个磁力链接和 BT 种子的搜索引擎 {Magnet & Torrent}，本文简单介绍一下主要的系统功能和用到的技术。 系统包括几个独立的部分： 使用 Python 的 Scrapy 框架开发的网络爬虫，用来爬取磁力链接和种子； 使用 PHP CI 框架开发的简易网站； 搜索引擎目前直接使用的 MySQL，将来可以考虑使
  • sql添加、删除表中的列 macroli sql
    添加没有默认值：alter table Test add BazaarType char(1) 有默认值的添加列：alter table Test add BazaarType char(1) default(0) 删除没有默认值的列：alter table Test drop COLUMN BazaarType 删除有默认值的列：先删除约束（默认值）alter table Test DRO
  • PHP中二维数组的排序方法 abc123456789cba 排序二维数组PHP
    <?php/*** @package     BugFree* @version     $Id: FunctionsMain.inc.php,v 1.32 2005/09/24 11:38:37 wwccss Exp $*** Sort an two-dimension array by some level
  • hive优化之------控制hive任务中的map数和reduce数 superlxw1234 hivehive优化
    一、    控制hive任务中的map数: 1.    通常情况下，作业会通过input的目录产生一个或者多个map任务。 主要的决定因素有： input的文件总个数，input的文件大小，集群设置的文件块大小(目前为128M, 可在hive中通过set dfs.block.size;命令查看到，该参数不能自定义修改)；2. 
  • Spring Boot 1.2.4 发布 wiselyman spring boot
    Spring Boot 1.2.4已于6.4日发布，repo.spring.io and Maven Central可以下载(推荐使用maven或者gradle构建下载)。   这是一个维护版本，包含了一些修复small number of fixes,建议所有的用户升级。   Spring Boot 1.3的第一个里程碑版本将在几天后发布，包含许多
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他