极奏
极奏

《JavaScript高级程序设计》读书笔记-第六章(面向对象的程序设计)

理解对象

属性类型

有两种类型:数据属性和访问器属性

  • 数据属性
    • [[Configurable]]
      表示能否通过delete删除属性
    • [[Enumerable]]
      表示能否通过for-in循环返回属性
    • [[Writable]]
      表示能否修改属性的值
    • [[Value]]
      包含这个属性的数据值

例如

var person = {
  name: 'Nicholas'
}

这个对象中[[Configurable]]、[[Enumerable]]、[[Writable]]都设置成true,[[Value]]设置为指定的值

要修改属性默认的值，则要用ES5的Objcet.defineProperty()方法
这个方法接受三个参数：属性所在的对象，属性的名字和一个描述符对象，可以修改对应的特征值

var person = {}
Object.defineProperty(person,'name',{
  writable: false,
  value: 'Nicholes'
})

这个例子创建了一个name属性，他的值是只读，不可修改的

类似的设置configurable:false，表示不能从对象中删除属性
一旦把属性定义成不可配置的，就不能再把它变回可配置的了
此时，再调用Object.defineProperty修改除writable之外的属性，就会导致错误

  • 访问器属性
    访问器属性不包含数据值，他们包含一堆getter和setter函数，在读取访问器属性时，会调用getter函数，这个函数负责返回有效的值。在写入访问器属性时，会调用setter函数并传入新值
    • [[Configurable]]
      表示能否通过delete删除属性从而重新定义属性
    • [[Enumerable]]
      表示能否通过for-in循环返回属性
    • [[Get]]
      在读取属性时调用的函数,默认值为undefined
    • [[Set]]
      在写入属性时调用的函数,默认值为undefined

访问器属性不能直接定义，必须使用Object.defineProperty()来定义

var book = {
  _year: 2004,
  edition: 1
}

Object.defineProperty(book,'year',{
  get: function(){
    return this._year
  },
  set: function(newValue){
    if(this._year > 2004){
      this._year = newValue
      this.edition += newValue - 2004
    }
  }
})

book.year = 2005
console.log(book.edition)    //2

支持Object.defineProperty()这个方法只有IE9+,Firefox4+,Safari5+,Opera12+和Chrome

有两个遗留的方法，同样也能实现上面的功能
__defineGetter__()和__defineSetter__()
这两个方法最初是由Firefox引进的，后来Safari3、Chrome 1 和Opera9.5也给出了相同的实现

var book = {
  _year: 2004,
  edition: 1
}
book.__defineGetter__('year'){
    return this._year
}

book.__defineSetter__('year',function(newValue){
    if(this._year > 2004){
      this._year = newValue
      this.edition += newValue - 2004
    }
})

book.year = 2005
console.log(book.edition)    //2
定义多个属性

ES5Object.defineProperties()
接收两个参数，第一个对象是添加和修改其属性的对象，第二个对象的属性与第一个对象中要添加或修改的属性一一对应。

用法：

var book = {}
Object.defineProperty(book,{
  _year: { 
    value: 2014
  },
  edition: {
    value: 1
  },
  year: {
    get: function(){
      return this._year
    },
    set: function(newValue){
      if(this._year > 2004){
        this._year = newValue
        this.edition += newValue - 2004
      }
    }
  }
})
读取属性的特性

ES5的Object.getOwnPropertyDescriptor()方法

创建对象

工厂模式
function createPerson(name, age, job){
  var o = new Object()
  o.name = name
  o. age = age
  o.job = job
  o.sayName = function(){
    console.log(this.name)
  }
  return o
}

var people1 = createPerson('Nicholas', 29, 'Software Engineer')
var people2 = createPerson('Greg', 27, 'Doctor')

工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题，即怎样知道一个对象的类型，随着JavaScript的发展，又一个新模式出现了

构造函数模式
function Person(name, age, job){
  this.name = name
  this.age = age
  this.job = job
  this.sayName = function(){
    console.log(this.name)
  }
}
var person1 = new Person('Nicholas', 29, 'Software Engineer')
var person2 = new Person('Greg', 27, 'Doctor')

要创建Person的新实例，必须用new操作符，以这种方式调用构造函数的对象会经历四个步骤
1、创建一个新对象
2、将构造函数的作用域赋给新对象( 因此this就指向了这个新对象 )
3、执行构造函数中的代码（为这个新对象添加属性）
4、返回新对象

person1和person2分别保存着Person的一个不同的实例，这两个对象都有一个constructor（构造函数）属性，这个属性指向Person

console.log(person1.constructor === Person)  //true
console.log(person2.constructor === Person)  //true

检测对象类型，instanceof操作符更为可靠

console.log(person1 instanceof Object)  //true
console.log(person1 instanceof Person)  //true
console.log(person2 instanceof Object)  //true
console.log(person2 instanceof Person)  //true
  • 将构造函数当做函数
    任何函数，只要通过new操作符来调用，他都可以作为构造函数。
    同样的，如果不通过new操作符来调用，那它跟普通函数也没什么区别。 
//当做构造函数来使用
var person1 = new Person('Nicholas', 29, 'Software Engineer')
person.sayName()

//当做普通函数来使用
Person('Greg',27,'Doctor')      //添加到window
window.sayName()               //'Greg'

//在另一个对象的作用域中调用
var o = new Object()
Person.call(o,'Nicholas', 29, 'Software Engineer')
o.sayName()                     //'Nicholas'
  • 构造函数的问题

缺点：每个方法在每个实例上要重新创建一遍
从逻辑角度上来讲，此时的构造函数也可以这样定义:

function Person(name, age, job){
  this.name = name
  this.age = age
  this.job = job
  this.sayName = new Function(console.log(this.name))      //与声明函数等价
}

以这种方式创建函数，会导致不同的作用域链和标识符解析，但创建Function新实例的机制仍然是相同的。因此，不同实例上的同名函数是不同的。

这样创建没必要，况且有this对象在，可以将函数定义转移到构造函数之外，大可这么创建

function Person(name, age, job) {
  this.name = name
  this.age = age
  this.job = job
}

function sayName() {
  console.log(this.name)
}

这样做确实是解决了两个函数做同一件事的问题。可是新问题又来了：在全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域有点名不副实，如果对象需要很多方法，那就要定义很多个全局函数，这样我们定义的引用类型就丝毫没有封装性可言

原型模式
  • prototype属性，这个属性是一个指针，指向一个对象
  • prototype就是通过调用构造函数而创建的那个对象实例的原型对象
function Person() {
}
Person.prototype.name = 'Nicholas'
Person.prototype.age = 29
Person.prototype.job = 'Software Engineer'
Person.prototype.sayName = function() {
  console.log(this.name)
}
var person1 = new Person()
person1.sayNmae()                                        // 'Nicholas'
var person2 = new Person()
person2.sayName()                                        // 'Nicholas'

console.log(person1.sayNmae() === person2.sayName())     //true

  • 与构造函数不同的是，新对象的这些属性和方法是由所有实例共享的。

  • 理解原型对象


  • 如上图 Person.prototype 指向了原型对象 Person Prototype，而Person.prototype.constructor又指回 Person 。

  • 原型对象中除了包含 constructor 属性之外，还包括后来添加的其他属性。

  • Person的每个实例，person都包含一个内部属性，该属性指向了Person.prototype

  • 如果我们在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那我们就在实例中创建该属性，该属性会屏蔽原型中对应的属性

function Person() {

}
Person.prototype.name = 'Nicholas'
Person.prototype.age = 29
Person.prototype.job = 'Software Engineer'
Person.prototype.sayName = function() {
  console.log(this.name)
}
var person1 = new Person()
var person2 = new Person()

preson1.name = 'Greg'
console.log(person1.name)          //'Greg'
console.log(perison2.name)         //'Nicholas'

此时person1.name是一个实例属性

in
  • in操作符会在通过对象能访问给定属性时返回true，无论该属性存在于实例中还是原型中
  • 在使用for - in 循环时，返回的是所有能够通过对象访问的、可枚举(Enumerated)属性
Object.keys()

要取得对象上所有可枚举的属性，Object.keys()方法，返回一个包含所有可枚举属性的字符串数组

Object.getOwnPropertyName()

取得对象上的所有实例属性

原型模式的另一种写法
function Person(){
}

Person.prototype = {
  name: 'Nicholas',
  age: 28,
  job: 'Software Engineer',
  sayName: function(){
    console.log(this.name)
  }
}
  • 跟之前写法的不同之处：
    设置为等于一个以对象字面量形式创建的新对象。但是constructor属性不再指向Person了
  • 原因：
    每创建一个函数，就会同时创建它的prototype对象，这个对象也会自动获得constructor属性。我们在这里的写法，重写了默认的prototype对象，因此constructor也变成了新对象的constructor属性（指向Object构造函数），不再指向Person函数
  • 如果constructor重要，可以这么写
function Person(){
}

Person.prototype = {
  constructor: Person,
  name: 'Nicholas',
  age: 28,
  job: 'Software Engineer',
  sayName: function(){
    console.log(this.name)
  }
}

这种方式会让constructor的[[Enumerable]]特性设置为true
有另外一种方式，能还原constructor，用Object.defineProperty()

function Person(){
}

Person.prototype = {
  name: 'Nicholas',
  age: 28,
  job: 'Software Engineer',
  sayName: function(){
    console.log(this.name)
  }
}
Object.defineProperty(Person.prototype, 'constructor', {
  enumerable: false,
  value: Person
})
原型对象的问题
  • 原型对象的最大问题是由其共享的本性所导致的
    对于包含引用类型值的属性来说，问题就比较突出了
function Person(){
}

Person.prototype = {
  name: 'Nicholas',
  age: 28,
  job: 'Software Engineer',
  friends: ['Shelby', 'Court']
  sayName: function(){
    console.log(this.name)
  }
}

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

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 === person1.friends)    //true
组合使用原型模式和构造函数
  • 构造函数模式用于定义实例属性
  • 原型模式用于定义方法和共享的属性
function Person(name, age, job){
  this.name = name
  this.age = age
  this.job = job
  this.friends = ['Shelby','Court']
}

Person.propotype = {
  sayName: function(){
    console.log(this.name)
  }
}

Object.defineProperty(Person.prototype, 'constructor', {
  enumerable: false,
  value: Person
})
动态原型模式

可以通过检查某个应该存在的方法

function Person(name, age, job) {

  this.name = name
  this.age = age
  this.job = job

  if(typeof this.sayName != 'function') {
    Person.propotype.sayName = function() {
      console.log(this.name)
    }
  }
}
寄生构造函数模式

这个模式可以在特殊的情况下用来为对象创建构造函数。假设我们想创建一个具有额外方法的数组。

function SpecialArray() {
  var values = new Array()
  values.push.apply(values, arguments)
  values.toPipedString = function(){
    return this.join('|')
  }
  return values
}
var colors = SpecialArray('red','green','blue')
console.log(colors.toPipedString())                      //'red|blue|green'

跟工厂模式的缺陷一样，不能依赖instanceof操作符来确定对象类型，所以不建议使用这种模式

稳妥构造函数

所谓稳妥对象，指的是没有公共属性，而其方法也不引用this的对象

function Person(name, age, job) {
  var o = new Object()
  o.sayname = function(){
    console.log(name)
  }
  return o
}
var friend = Person('Nicholas', 29, 'Softwate Engineer')
friend.sayName()
继承

ECMAScript只支持实现继承，而且其实现继承主要是依靠原型链

原型链
function SuperType() {
  this.property = true
}
SuperType.prototype.getSuperValue = function() {
  return this.property
}
function SubType() {
  this.subproperty = false
}
SubType.prototype = new SuperType()
SubType.prototype.getSubValue = function() {
  return this.subproperty
}
var instance =  new SubType()
console.log(instance.getSuperValue())  //true
console.log(instance.getSubValue())   //fasle

此时打印instance会得到



书上的图

在上面的代码中，我们没有使用SubType默认提供的原型，而是给它换了一个新原型，这个新原型就是SuperType的实例。新原型不仅具有作为一个SuperType的实例所拥有的全部属性和方法，而且其内部还有一个指针，指向了SuperType的原型

  • 别忘了默认的原型object
image.png
  • 谨慎地定义方法

给原型添加方法的代码一定要放在替换原型的语句之后

function SuperType() {
  this.property = true
}
SuperType.prototype.getSuperValue = function() {
  return this.property
}
function SubType() {
  this.subproperty = false
}
SubType.prototype = new SuperType()
//添加了新方法
SubType.prototype.getSubValue = function() {
  return this.subproperty
}
//重写SuperType中的方法
SubType.prototype.getSuperValue = function() {
  return false
}
var instance =  new SubType()
console.log(instance.getSuperValue())  //false
console.log(instance.getSubValue())   //fasle
  • 不能使用对象字面量创建原型方法

这样做会重写原型链

function SuperType() {
  this.property = true
}
SuperType.prototype.getSuperValue = function() {
  return this.property
}
function SubType() {
  this.subproperty = false
}
SubType.prototype = new SuperType()

//使用了字面量来添加新方法，会导致上一行代码失效，覆盖掉上面的
SubType.prototype = {
  getSubValue: function() {
    return this.subproperty
  },
  someOtherMethod: function(){
    return false
  }
}

var instance =  new SubType()
console.log(instance.getSuperValue())  //undefined
原型链的问题

包含引用类型的原型属性会被所有的实例共享

function SuperType(){
  this.colors = ['red', 'blue']
}

function SubType(){
}

SubType.prototype = new SuperType()

var instance1 = new SubType()
var instance2 = new SubType()

instance1.colors.push('black')

console.log(instance1.colors)        //["red", "blue", "black"]
console.log(instance2.colors)        //["red", "blue", "black"]
  • 原型链的第二个问题是，在创建子类型的实例的时候，没有办法在不影响所有对象实例的情况下向父类型的构造函数中传递参数。
借用构造函数

也被称为伪造对象或经典继承。
这种技术的基本思想相当简单，即在子类型构造函数的内部调用父类型的构造函数

function SuperType(){
  this.colors = ['red', 'blue', 'green']
}
function SubType(){
  //继承了SuperType
  SuperType.call(this)
}
var instance1 = new SubType()
instance1.colors.push('black')
console.log(instance1.colors)           //["red", "blue", "green", "black"]

var instance2 = new SubType()
console.log(instance2.colors)          //["red", "blue", "green"]

通过调用call()方法或者apply()方法，我们实际上是在(未来将要)新创建的SubType实例的环境下调用了SuperType构造函数。这样一来，就会在新SubType对象上执行SuperType()函数中定义的所有对象初始化代码。

  • 借用构造函数的问题
    函数复用无从谈起
组合继承

也叫做伪经典继承，思路是使用原型链实现了对原型属性和方法的继承，而通过构造函数来实现对实例属性的继承

function SuperType(name) {
  this.name = name
  this.colors = ['red','blue','yellow']
}

SuperType.prototype.sayName = function() {
  console.log(this.name)
}

function SubType(name,age) {
  SuperType.call(this,name)
  this.age = age
}

SubType.prototype = new SuperType()

SubType.prototype.sayAge = function() {
  console.log(this.age)
}

var instance1 = new SubType('Nicholas', 29)
instance1.colors.push('black')
console.log(instance1.colors)                 // ["red", "blue", "yellow", "black"]
instance1.sayName()                          //Nicholas
instance1.sayAge()                          //29

var instance2 = new SubType('Greg', 27)
console.log(instance2.colors)              //["red", "blue", "yellow"]
instance2.sayName()                        //Greg
instance2.sayAge()                        //27

以上是比较常用的继承方式

原型式继承

这种继承模式封装了原型链继承，是原型链继承的升级版，原型链继承+工厂模式
首先我们得创建一个object函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例。

缺点：会调用两次父类构造函数，第一次是创建子类型原型的时候

也就是ES5的Object.creat()简陋版的原理

const object = function(o){
  function F(){}
  F.prototype = o
  return new F()
}

const person = {
  name: 'Nicholas',
  friends: ['Shelby', 'Court', 'Van']
}
const anotherPerson = object(person)
anotherPerson.name = 'Greg'
anotherPerson.friends.push('Rob')

const yetAnotherPerson = object(person)
yetAnotherPerson.name = 'Linda'
yetAnotherPerson.friends.push('Barbie')

console.log(person.friends)
寄生式继承

增强原型式继承的功能的一种模式
缺点：使用寄生式继承来为对象添加函数，会由于不能做到函数复用而降低效率，这一点与构造函数模式类似。

const createAnother = function(original){
  const clone = object(original)
  clone.sayHi = function(){
    console.log('hi')
  }
  return clone
}

const person = {
  name: 'Nicholas',
  friends: ['Shelby', 'Court', 'Van']
}
const anotherPerson = createAnother(person)
anotherPerson.sayHi() //hi
寄生组合式继承

所谓寄生组合式继承，就是借用构造函数来继承属性

const object = function(o){
  function F(){}
  F.prototype = o
  return new F()
}

const inheritPrototype = function(Child, Parent){
  const prototype = object(Parent.prototype)
  prototype.constructor = Child
  Child.prototype = prototype
  Child.__proto__ = Parent
}

function Parent(name) {
  this.name = name
}

Parent.sayHello = function (){
    console.log('hello')
}

Parent.prototype.sayName = function() {
    console.log('my name is ' + this.name)
    return this.name
}


function Child(name, age) {
    Parent.call(this, name)
    this.age = age
}

inheritPrototype(Child, Parent)

Child.prototype.sayAge = function () {
    console.log('my age is ' + this.age)
    return this.age
}

你可能感兴趣的:(《JavaScript高级程序设计》读书笔记-第六章(面向对象的程序设计))

  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 拥有断舍离的心态，过精简生活--《断舍离》读书笔记 爱吃丸子的小樱桃
    不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 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的运行
  • 读书笔记|《遇见孩子，遇见更好的自己》5 抹茶社长
    为人父母意味着放弃自己的过去，不要对以往没有实现的心愿耿耿于怀，只有这样，孩子们才能做回自己。985909803.jpg孩子在与父母保持亲密的同时更需要独立，唯有这样，孩子才会成为孩子，父母才会成其为父母。有耐心的人生往往更幸福，给孩子留点余地。认识到养儿育女是对耐心的考验。为失败做好心理准备，教会孩子控制情绪。了解自己的底线，说到底线，有一点很重要，父母之所以发脾气，真正的原因往往在于他们自己，
  • 第六章 零食风波 香香的懒洋洋
    自从有了女儿，虎子和妞子矛盾越来越多。虎子觉得妞子太懒、太脏，女儿的尿布从来不清洗。妞子经常把给女儿用过的尿布堆在炕头一角，让它们自己慢慢干，干了在用；妞子的头发，一个月也不清洗一次，散发出阵阵难闻的气味；更别说冲凉、洗澡了。屋子里弥漫着各种怪味，虎子打心底里讨厌妞子的习惯，但他一点也不帮忙照顾孩子。虎子妈实在看不下去时候，就直接告诉妞子，孩子尿布要洗、个人卫生要注意。但妞子嘴上答应好好的，却迟迟
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 阅读《认知觉醒》读书笔记 就看看书
    本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 《对生命说是》读书笔记2021-5-27 Diana_58d9
    静心技巧——换个视角看待问题。尝试一下这个实验，1坐在椅子上，允许自己全身心的沉浸在你最爱的问题当中，你知道头脑热爱咀嚼他们，记录当你被卷入问题时的感受。2站起来有意识地离开那张椅子，想象你现在离开了你的问题。缓缓的围绕椅子走一圈，从不同的角度看看你的问题。在房间中找一个远离问题的空间，开始仔细深入的看看这个问题，他是真实的还是你制造出来的，同样的状况对于其他人来说会是问题吗？3反复体会作战问题里
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • 精力是碎片化时代的核心竞争力——精力管理介绍 爱写作的harry
    《掌控：开启不疲惫、不焦虑的人生》读书笔记精力是碎片化时代的核心竞争力精力包括身、心两个层面，包括体力、专注力和意志力等多个维度。在信息爆炸、全球化竞争的时代，谁的体力充沛，专注力和意志力更强，谁获胜的机会就更大。而要做到这些，不做精力管理，一切都是空谈。另外，人的精力是有限的，表现会有高低起伏，所以需要管理，需要规划使用。怎样才算做到了精力管理精力管理是指主动掌握自己的体力、专注力和意志力，让自
  • 《经营者养成记》读书笔记分享 37度杉杉
    何为经营者：变革的能力、赚钱的能力、建设团队的能力和追求理想的能力。读书笔记：（一）经营的含义1、所谓经营者，就是取得成果的人2、所谓经营者，是抱持使命感，将使命与成果相结合的人3、经营者必须是领导者，具备“建设团队的能力”4、经营者必须为使命而生的人，具备“追求理想的能力”（二）为什么必须培养经营者？一、变革的能力1、抱持高远的目标2、质疑常识，不受常识束缚3、树立高标准、不放松不放弃4、不畏风
  • 财富自由之路读书笔记2 Elaine_a963
    继续财富自由读书笔记，今天就第十-二十三章进行归纳总结思考。这本书可以说是边学边练的武功秘籍。秘籍一：注意力。先从认知上刷新，先前谈到价值的重要性及单位价值提升的必要性。这里就引出了：“注意力”是在任何地方“挖掘”价值的最基本工具。那么，要自如运用注意力，就得练习。这里李老师给的无他，就是基本功训练扎实-坐享。秘籍二：活在未来。再一次颠覆认知，大众的思维是活在当下，而这里指引我们要活在未来。用正确
  • 【机器人建模和控制】读书笔记 Piccab0o 机器人
    机器人建模和控制——马克·斯庞A.x10=x1∙x0x^0_1=x_1\bulletx_0x10=x1∙x0，其实就是：1）x1x_1x1轴向量在O0O_0O0系下的坐标2）在x0x_0x0轴上的投影3）坐标变换矩阵的R10R_1^0R10的第一个元素B.点p在o1x1y1z1o_1x_1y_1z_1o1x1y1z1系下的坐标p1p^1p1可以表示为：p=ux1+vy1+wz1p=ux_1+vy_
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 读书笔记 语馨_f389
    王聪丽坚持分享第1008天《亲密关系》期望就是通往地狱之路，因为期望会把接受和让人自由等充满爱意的感觉挡在门外。如果我不能接受别人现在的样子或不让他们自由地走自己的路，那么我就不是真的爱他们，我只是想从他们身上得到满足，与他们建立亲密关系的目的并不是为了爱，而是为了满足我小小的自私需求。我们可以觉察一下，在潜意识里，我对他有什么要求。让人惊讶的是，不开心的原因往往是沉睡多年的需求。不论是用暗示还是
  • xml解析 小猪猪08 xml
    1、DOM解析的步奏 准备工作：    1.创建DocumentBuilderFactory的对象    2.创建DocumentBuilder对象    3.通过DocumentBuilder对象的parse(String fileName)方法解析xml文件    4.通过Document的getElem
  • 每个开发人员都需要了解的一个SQL技巧 brotherlamp linuxlinux视频linux教程linux自学linux资料
      对于数据过滤而言CHECK约束已经算是相当不错了。然而它仍存在一些缺陷，比如说它们是应用到表上面的，但有的时候你可能希望指定一条约束，而它只在特定条件下才生效。 使用SQL标准的WITH CHECK OPTION子句就能完成这点，至少Oracle和SQL Server都实现了这个功能。下面是实现方式： CREATE TABLE books (   id &
  • Quartz——CronTrigger触发器 eksliang quartzCronTrigger
    转载请出自出处：http://eksliang.iteye.com/blog/2208295 一.概述 CronTrigger 能够提供比 SimpleTrigger 更有具体实际意义的调度方案，调度规则基于 Cron 表达式，CronTrigger 支持日历相关的重复时间间隔（比如每月第一个周一执行），而不是简单的周期时间间隔。 二.Cron表达式介绍 1）Cron表达式规则表 Quartz
  • Informatica基础 18289753290 InformaticaMonitormanagerworkflowDesigner
    1. 1）PowerCenter Designer：设计开发环境，定义源及目标数据结构；设计转换规则，生成ETL映射。 2）Workflow  Manager：合理地实现复杂的ETL工作流，基于时间，事件的作业调度 3）Workflow  Monitor：监控Workflow和Session运行情况，生成日志和报告 4）Repository  Manager：
  • linux下为程序创建启动和关闭的的sh文件，scrapyd为例 酷的飞上天空 scrapy
    对于一些未提供service管理的程序  每次启动和关闭都要加上全部路径，想到可以做一个简单的启动和关闭控制的文件   下面以scrapy启动server为例，文件名为run.sh：   #端口号，根据此端口号确定PID PORT=6800 #启动命令所在目录 HOME='/home/jmscra/scrapy/' #查询出监听了PORT端口
  • 人--自私与无私 永夜-极光
                今天上毛概课,老师提出一个问题--人是自私的还是无私的,根源是什么?               从客观的角度来看,人有自私的行为,也有无私的
  • Ubuntu安装NS-3 环境脚本 随便小屋 ubuntu
      将附件下载下来之后解压，将解压后的文件ns3environment.sh复制到下载目录下（其实放在哪里都可以，就是为了和我下面的命令相统一）。输入命令：   sudo ./ns3environment.sh >>result   这样系统就自动安装ns3的环境，运行的结果在result文件中，如果提示     com
  • 创业的简单感受 aijuans 创业的简单感受
           2009年11月9日我进入a公司实习，2012年4月26日，我离开a公司，开始自己的创业之旅。      今天是2012年5月30日，我忽然很想谈谈自己创业一个月的感受。 当初离开边锋时，我就对自己说：“自己选择的路，就是跪着也要把他走完”，我也做好了心理准备，准备迎接一次次的困难。我这次走出来，不管成败
  • 如何经营自己的独立人脉 aoyouzi 如何经营自己的独立人脉
    独立人脉不是父母、亲戚的人脉，而是自己主动投入构造的人脉圈。“放长线，钓大鱼”，先行投入才能产生后续产出。   现在几乎做所有的事情都需要人脉。以银行柜员为例，需要拉储户，而其本质就是社会人脉，就是社交！很多人都说，人脉我不行，因为我爸不行、我妈不行、我姨不行、我舅不行……我谁谁谁都不行，怎么能建立人脉？我这里说的人脉，是你的独立人脉。   以一个普通的银行柜员
  • JSP基础 百合不是茶 jsp注释隐式对象
      1,JSP语句的声明 <%! 声明 %> 　　 声明：这个就是提供java代码声明变量、方法等的场所。 表达式 <%= 表达式 %> 　　 这个相当于赋值，可以在页面上显示表达式的结果， 程序代码段/小型指令　<% 程序代码片段 %>   2,JSP的注释   <!-- -->
  • web.xml之session-config、mime-mapping bijian1013 javaweb.xmlservletsession-configmime-mapping
    session-config 1.定义： <session-config> <session-timeout>20</session-timeout> </session-config> 2.作用：用于定义整个WEB站点session的有效期限，单位是分钟。   mime-mapping 1.定义： <mime-m
  • 互联网开放平台（1） Bill_chen 互联网qq新浪微博百度腾讯
    现在各互联网公司都推出了自己的开放平台供用户创造自己的应用，互联网的开放技术欣欣向荣，自己总结如下： 1.淘宝开放平台(TOP) 网址：http://open.taobao.com/ 依赖淘宝强大的电子商务数据，将淘宝内部业务数据作为API开放出去，同时将外部ISV的应用引入进来。 目前TOP的三条主线： TOP访问网站：open.taobao.com ISV后台：my.open.ta
  • 【MongoDB学习笔记九】MongoDB索引 bit1129 mongodb
    索引 可以在任意列上建立索引 索引的构造和使用与传统关系型数据库几乎一样,适用于Oracle的索引优化技巧也适用于Mongodb 使用索引可以加快查询,但同时会降低修改,插入等的性能 内嵌文档照样可以建立使用索引 测试数据     var p1 = { "name":"Jack", "age&q
  • JDBC常用API之外的总结 白糖_ jdbc
    做JAVA的人玩JDBC肯定已经很熟练了，像DriverManager、Connection、ResultSet、Statement这些基本类大家肯定很常用啦，我不赘述那些诸如注册JDBC驱动、创建连接、获取数据集的API了，在这我介绍一些写框架时常用的API，大家共同学习吧。     ResultSetMetaData获取ResultSet对象的元数据信息
  • apache VelocityEngine使用记录 bozch VelocityEngine
    VelocityEngine是一个模板引擎，能够基于模板生成指定的文件代码。   使用方法如下：     VelocityEngine engine = new VelocityEngine();// 定义模板引擎     Properties properties = new Properties();// 模板引擎属
  • 编程之美-快速找出故障机器 bylijinnan 编程之美
    package beautyOfCoding; import java.util.Arrays; public class TheLostID { /*编程之美 假设一个机器仅存储一个标号为ID的记录，假设机器总量在10亿以下且ID是小于10亿的整数，假设每份数据保存两个备份，这样就有两个机器存储了同样的数据。 1.假设在某个时间得到一个数据文件ID的列表，是
  • 关于Java中redirect与forward的区别 chenbowen00 javaservlet
    在Servlet中两种实现： forward方式：request.getRequestDispatcher(“/somePage.jsp”).forward(request, response); redirect方式：response.sendRedirect(“/somePage.jsp”); forward是服务器内部重定向，程序收到请求后重新定向到另一个程序，客户机并不知
  • [信号与系统]人体最关键的两个信号节点 comsci 系统
            如果把人体看做是一个带生物磁场的导体,那么这个导体有两个很重要的节点,第一个在头部,中医的名称叫做 百汇穴, 另外一个节点在腰部,中医的名称叫做 命门         如果要保护自己的脑部磁场不受到外界有害信号的攻击,最简单的
  • oracle 存储过程执行权限 daizj oracle存储过程权限执行者调用者
    在数据库系统中存储过程是必不可少的利器，存储过程是预先编译好的为实现一个复杂功能的一段Sql语句集合。它的优点我就不多说了，说一下我碰到的问题吧。我在项目开发的过程中需要用存储过程来实现一个功能，其中涉及到判断一张表是否已经建立，没有建立就由存储过程来建立这张表。 CREATE OR REPLACE PROCEDURE TestProc  IS    fla
  • 为mysql数据库建立索引 dengkane mysql性能索引
    前些时候，一位颇高级的程序员居然问我什么叫做索引，令我感到十分的惊奇，我想这绝不会是沧海一粟，因为有成千上万的开发者（可能大部分是使用MySQL的）都没有受过有关数据库的正规培训，尽管他们都为客户做过一些开发，但却对如何为数据库建立适当的索引所知较少，因此我起了写一篇相关文章的念头。  最普通的情况，是为出现在where子句的字段建一个索引。为方便讲述，我们先建立一个如下的表。
  • 学习C语言常见误区 如何看懂一个程序 如何掌握一个程序以及几个小题目示例 dcj3sjt126com c算法
    如果看懂一个程序，分三步   1、流程   2、每个语句的功能   3、试数   如何学习一些小算法的程序 尝试自己去编程解决它，大部分人都自己无法解决 如果解决不了就看答案 关键是把答案看懂，这个是要花很大的精力，也是我们学习的重点 看懂之后尝试自己去修改程序，并且知道修改之后程序的不同输出结果的含义 照着答案去敲 调试错误
  • centos6.3安装php5.4报错 dcj3sjt126com centos6
    报错内容如下: Resolving Dependencies --> Running transaction check ---> Package php54w.x86_64 0:5.4.38-1.w6 will be installed --> Processing Dependency: php54w-common(x86-64) = 5.4.38-1.w6 for
  • JSONP请求 flyer0126 jsonp
          使用jsonp不能发起POST请求。 It is not possible to make a JSONP POST request. JSONP works by creating a <script> tag that executes Javascript from a different domain; it is not pos
  • Spring Security（03）——核心类简介 234390216 Authentication
    核心类简介 目录 1.1     Authentication 1.2     SecurityContextHolder 1.3     AuthenticationManager和AuthenticationProvider 1.3.1  &nb
  • 在CentOS上部署JAVA服务 java--hhf javajdkcentosJava服务
        本文将介绍如何在CentOS上运行Java Web服务，其中将包括如何搭建JAVA运行环境、如何开启端口号、如何使得服务在命令执行窗口关闭后依旧运行     第一步：卸载旧Linux自带的JDK ①查看本机JDK版本 java -version    结果如下 java version "1.6.0"
  • oracle、sqlserver、mysql常用函数对比[to_char、to_number、to_date] ldzyz007 oraclemysqlSQL Server
    oracle                                &n
  • 记Protocol Oriented Programming in Swift of WWDC 2015 ningandjin protocolWWDC 2015Swift2.0
    其实最先朋友让我就这个题目写篇文章的时候，我是拒绝的，因为觉得苹果就是在炒冷饭， 把已经流行了数十年的OOP中的“面向接口编程”还拿来讲，看完整个Session之后呢，虽然还是觉得在炒冷饭，但是毕竟还是加了蛋的，有些东西还是值得说说的。 通常谈到面向接口编程，其主要作用是把系统设计和具体实现分离开，让系统的每个部分都可以在不影响别的部分的情况下，改变自身的具体实现。接口的设计就反映了系统
  • 搭建 CentOS 6 服务器(15) - Keepalived、HAProxy、LVS rensanning keepalived
    （一）Keepalived （1）安装 # cd /usr/local/src # wget http://www.keepalived.org/software/keepalived-1.2.15.tar.gz # tar zxvf keepalived-1.2.15.tar.gz # cd keepalived-1.2.15 # ./configure # make &a
  • ORACLE数据库SCN和时间的互相转换 tomcat_oracle oraclesql
    SCN（System Change Number 简称 SCN）是当Oracle数据库更新后，由DBMS自动维护去累积递增的一个数字，可以理解成ORACLE数据库的时间戳，从ORACLE 10G开始，提供了函数可以实现SCN和时间进行相互转换； 　　 用途：在进行数据库的还原和利用数据库的闪回功能时，进行SCN和时间的转换就变的非常必要了； 　 　操作方法： 　　1、通过dbms_f
  • Spring MVC 方法注解拦截器 xp9802 spring mvc
    应用场景，在方法级别对本次调用进行鉴权，如api接口中有个用户唯一标示accessToken,对于有accessToken的每次请求可以在方法加一个拦截器，获得本次请求的用户，存放到request或者session域。 python中，之前在python flask中可以使用装饰器来对方法进行预处理，进行权限处理 先看一个实例,使用@access_required拦截： ?
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他