开发►前端

JS new 一个对象干了什么事 


function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.attr = 'human'
const man1 = new Person('123', 18)
console.log(man1.name)
console.log(man1.age)
console.log(man1.attr)

function _new(Constructor, ...param) {
  // 新建一个对象
  const obj = {} // Object.create(null)
  // 建立继承关系，__proto__指向构造函数原型，获得原型属性与方法
  // 这里获得 attr 属性
  obj.__proto__ = Constructor.prototype
  // 开始执行这个构造函数，就是这个构造函数的this方法属性挂到这个新对象上
  // 这里就是把 name 和 age 挂上去
  const ret = Constructor.call(obj, ...param)
  // const ret = Constructor.apply(obj, param)
  // 若构造函数中没有返回值或返回值是基本类型（Number、String、Boolean）的值，则返回新实例对象；
  // 若返回值是引用类型的值，则实际返回值为这个引用类型。
  return typeof ret === 'object' ? ret : obj
}
const man2 = _new(Person, '456', 20)
console.log(man2.name)
console.log(man2.age)
console.log(man2.attr)
开发►前端

JS的继承方式

1、原型链继承

function SuperType(type) {
  this.property = true
  this.colors = ['red', 'blue']
  this.type = type
}
SuperType.prototype.getSuperValue = function() {
  console.log(this.property)
}

function SubType(type) {
  this.subproperty = false
  this.subtype = type
}

// 如果这里是 SubType.prototype = SuperType.prototype
// 则 this.property 值为 undefined
SubType.prototype = new SuperType('super')

SubType.prototype.getSubValue = function() {
  console.log(this.subproperty)
}

const instance = new SubType('one')

instance.getSuperValue()
instance.getSubValue()

console.log(instance instanceof SubType, instance.constructor)
console.log(instance instanceof SuperType)

instance.colors.push('black')
console.log(instance.colors, instance.type, instance.subtype)

const instance2 = new SubType('two')
console.log(instance2.colors, instance2.type, instance2.subtype)

// 所有实例的 colors 属性指向同一个对象，一改全改
// 如果父类有参数，没法带进去

2、构造函数继承

function SuperType(type) {
  this.property = true
  this.colors = ['red', 'blue']
  this.type = type
}
SuperType.prototype.getSuperValue = function() {
  console.log(this.property)
}

function SubType(type) {
  SuperType.call(this, type)
  // 为了确保不被父级的属性覆盖，可以在这之后再赋值子类的属性
  this.subproperty = true
}

const instance1 = new SubType('one')

console.log(instance1 instanceof SubType, instance1.constructor)
console.log(instance1 instanceof SuperType, instance1.type)

// 没有用到原型的方法属性
// instance1.getSuperValue()

instance1.colors.push('black')
console.log(instance1.colors)

const instance2 = new SubType('two')
console.log(instance2.colors, instance2.type)

3、组合继承（原型链继承 + 构造函数继承）

function SuperType(type) {
  this.property = 'true111'
  this.colors = ['red', 'blue']
  this.type = type
}
SuperType.prototype.getSuperValue = function() {
  console.log(this.property)
}

function SubType(type) {
  SuperType.call(this, type) // 调用一次
  // 为了确保不被父级的属性覆盖，可以在这之后再赋值子类的属性
  this.subproperty = true
}

SubType.prototype = new SuperType() // 调用两次

// 如果没有这一步，最终顺着父类的原型链指向父类SuperType
SubType.prototype.constructor = SubType

const instance1 = new SubType('one')

console.log(instance1 instanceof SubType, instance1.constructor)
console.log(instance1 instanceof SuperType, instance1.type)

instance1.getSuperValue()

instance1.colors.push('black')
console.log(instance1.colors)

const instance2 = new SubType('two')
console.log(instance2.colors, instance2.type)

4、原型式继承

// 缺点：引用类型属性依然是共享的
function object(o) {
  function F(){}
  F.prototype = o
  return new F()
}

const person = {
  name: 'xiaoming',
  colors: ['1', '2']
}

const p1 = object(person)
const p2 = object(person)

console.log(p1.colors, p2.colors)

p2.colors.push('3')

console.log(p1.colors, p2.colors)

// 等同于
const p3 = Object.create(person, {
  name1: {
    value: 'xiaohong'
  }
})

console.log(p1, p2, p3, p3.name)

5、寄生式继承

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

// 包了一层，定义了个方法增强对象，
// 缺点是函数没法复用，引用类型属性依然是共享的
function createObject(o) {
  const clone = object(o)
  clone.say = function() {
    console.log(this.colors)
  }
  return clone
}

const person = {
  name: 'xiaoming',
  colors: ['1', '2']
}

const p1 = createObject(person)
const p2 = createObject(person)

console.log(p1.colors, p2.colors)

p2.colors.push('3')

console.log(p1.colors, p2.colors)

p2.say()

6、寄生式组合继承

function SuperType(type) {
  this.name = 'true111'
  this.colors = ['red', 'blue']
}
SuperType.prototype.getSuperValue = function() {
  console.log(this.colors)
}

function SubType(name, age) {
  SuperType.call(this, name) // 调用一次
  // 为了确保不被父级的属性覆盖，可以在这之后再赋值子类的属性
  this.age = age
}

SubType.prototype = new SuperType() // 调用两次

// 如果没有这一步，最终顺着父类的原型链指向父类SuperType
SubType.prototype.constructor = SubType

const s1 = new SubType('saaa', 18)
const s2 = new SubType('sbbb', 19)

console.log('~1~', s1, s2)

s2.colors.push('yellow')

console.log('~2~', s1, s2)

// 这样每个 SubType 实例都有两组 name 和 colors，
// 一组是自身属性下，一组是原型链指向父类实例的

function inherit(newType, superType) {
  newType.prototype = Object.create(superType.prototype)
  newType.prototype.constructor = newType
}

function NewType(name, age) {
  SuperType.call(this, name) // 调用一次
  // 为了确保不被父级的属性覆盖，可以在这之后再赋值子类的属性
  this.age = age
}

inherit(NewType, SuperType)

const n1 = new NewType('nbbb', 20)
const n2 = new NewType('nccc', 21)

console.log('~3~', n1, n2, n1.constructor)

n1.colors.push('yellow')

console.log('~4~', n1, n2)




7、ES6 Class 继承（略）

总结

  寄生式组合继承是 ES5 最完善的继承方式。细细一看，不就是跟 new 一个实例所做的操作差不多吗。不同之处在于复制的对象原型不一样。当然具体还是有差别，一个是原型，一个实例化。

随想►心情

空间起源

  好记性不如烂笔头。从小听到大，真的很有道理。但其实小时候仗着记忆力好，就懒得动笔。无论是记作业还是上课记笔记。当然所谓的好记忆其实那一瞬间，犹如内存，断电就没了。随着年纪增大，可能记忆力变差，可能经历的事多，确实遗忘的东西变多了。所以琢磨着找个地方给记下来。当然这种地方很多，自己搭建一个纯属好（第四声）玩。记录一些心情随想，所见所闻，所接触到的开发技术，烹饪煮食。
  另外一个就是照片，以前老是觉得在于精不在于多，明明身处随时随地可照相的时代。后来在看一些地方旅游照片的时候，发现自己喜欢的街头巷尾照片太少了，就感觉缺失了那一环一样。以后也多给拍下来。
  放两张偶然拍的自己觉得好的照片。




烹饪►传统

“bu”鱼

5.1那天家里寄了些生鲜小鱼，用传统的“bu”法，我也不知这个是什么做法，用普通话怎么念。

做法

取一铁盆，加水没过鱼，倒入酱油，撒上盐，量全凭自己把握。滚 15~20 分钟即可。期间注意翻身，以免粘锅和受热不均匀。


开发►前端

Hexo结合Github Page注意点

新手记录一些使用 hexo 和 Github Page 搭建个人空间遇到的。
其实不难，只是为了找个地方记录下来，方便后面可能的再次搭建。

一、Github Page

1、使用 username.github.io

如果想通过 username.github.io 就访问到相应的静态页面，那么必须有一个 username.github.io 名字的项目。
username 指的是个人或者组织的名字。如下图第一个红框是用户的名字，则第二个红框处必须一模一样。

2、使用 username.github.io/projectName

主的 username.github.io 域名只对应一个项目，其他项目就通过 username.github.io/项目名 来访问。

3、使用自定义域名

由于是直接在阿里云买的域名，所以对应的阿里云的操作，其他平台不确定。

  • 首先购买一个域名，进入域名服务

  • 添加下图两道记录，1的ip是 ping 2 的域名出来

  • 进入 github 项目，右上方的 setting，到下图的地方设置相应域名。这个博客域名是买的域名的二级域名。

二、Hexo

1、设置_config.yml

  • 打开 hexo 项目下的 _config.yml，进行下图设置，git的地址就是使用的工程地址。

2、CNAME

  • 上面的工程 setting 部分，实际上就是在工程根目录创建了一份CNAME名字的文件，没有后缀的文件类型。里面的内容为设置的那个二级域名，也就是原来是访问 username.github.io 地址的，就会跳到自定义的域名。

  • 为了防止每次部署都会清除掉该文件，从而要重复设置，可以将 CNAME 文件防止到 source 文件里，到时会依样拷贝过去。

相关传送门：
Hexo
Github Page