JavaScript 面向对象

function createPerson(name, age, job) {
  let o = new Object()
  o.name = name
  o.age = age
  o.job = job
  o.sayName = function () {
    console.log(this.name)
  }
  return o
}

let person1 = createPerson('Nicholas', 29, 'Software Engineer')
let person2 = createPerson('Greg', 27, 'Doctor')

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

let person1 = new Person('Nicholas', 29, 'Software Engineer')
let person2 = new Person('Greg', 27, 'Doctor')

person1.sayName() // Nicholas
person2.sayName() // Greg

function Person() {}

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

let person1 = new Person()
person1.sayName() // "Nicholas"

let person2 = new Person()
person2.sayName() // "Nicholas"

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

function Person() {}

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

let person1 = new Person()
let 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

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

function SubType() {}

// inherit from SuperType
SubType.prototype = new SuperType()

let instance1 = new SubType()
instance1.colors.push('black')
console.log(instance1.colors) // "red,blue,green,black"

let instance2 = new SubType()
console.log(instance2.colors) // "red,blue,green,black"

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

function SubType() {
  // inherit from SuperType
  SuperType.call(this)
}

let instance1 = new SubType()
instance1.colors.push('black')
console.log(instance1.colors) // "red,blue,green,black"

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

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

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

function SubType(name, age) {
  // inherit properties
  SuperType.call(this, name)

  this.age = age
}

// inherit methods
SubType.prototype = new SuperType()

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

let instance1 = new SubType('Nicholas', 29)
instance1.colors.push('black')
console.log(instance1.colors) // "red,blue,green,black"
instance1.sayName() // "Nicholas";
instance1.sayAge() // 29

let instance2 = new SubType('Greg', 27)
console.log(instance2.colors) // "red,blue,green"
instance2.sayName() // "Greg";
instance2.sayAge() // 27

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

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)
}

let instance1 = new SubType('Nicholas', 29)
console.log(instance1.__proto__) // SuperType {name: undefined, colors: [ 'red', 'blue', 'green' ], sayAge: [Function]}

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

let person = {
  name: 'Nicholas',
  friends: ['Shelby', 'Court', 'Van']
}

let anotherPerson = object(person)
anotherPerson.name = 'Greg'
anotherPerson.friends.push('Rob')

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

console.log(person.friends) // "Shelby,Court,Van,Rob,Barbie"

function createAnother(original) {
  let clone = Object.create(original) // create a new object by calling a function
  clone.sayHi = function () {
    // augment the object in some way
    console.log('hi')
  }
  return clone // return the object
}
let person = {
  name: 'Nicholas',
  friends: ['Shelby', 'Court', 'Van']
}

let anotherPerson = createAnother(person)
anotherPerson.sayHi() // "hi"

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

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

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

  this.age = age
}

SubType.prototype = Object.create(SuperType.prototype)
SubType.prototype.constructor = SubType

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

// class declaration
class Person {}

// class expression
const Animal = class {}

class Point {}
console.log(typeof Point) // "function"
console.log(Object.prototype.toString.call(Point)) //[object Function]
console.log(Point === Point.prototype.constructor) // true

console.log(FunctionExpression) // undefined
var FunctionExpression = function () {}
console.log(FunctionExpression) // function() {}

console.log(FunctionDeclaration) // FunctionDeclaration() {}
function FunctionDeclaration() {}
console.log(FunctionDeclaration) // FunctionDeclaration() {}

console.log(ClassExpression) // undefined
var ClassExpression = class {}
console.log(ClassExpression) // class {}

// console.log(ClassDeclaration); // ReferenceError: ClassDeclaration is not defined
class ClassDeclaration {}
console.log(ClassDeclaration) // class ClassDeclaration {}

ClassDeclaration() //TypeError: Class constructor ClassDeclaration cannot be invoked without 'new'

function Constructor() {
  if (!(this instanceof Constructor)) {
    throw new TypeError('Constructor cannot be invoked without "new"')
  }
}
Constructor() //TypeError: Constructor cannot be invoked without "new"

{
  function FunctionDeclaration() {}
  class ClassDeclaration {}
}

console.log(FunctionDeclaration) // FunctionDeclaration() {}
console.log(ClassDeclaration) // ReferenceError: ClassDeclaration is not defined

//函数声明在块级作用域中的奇特行为，类似于函数声明变成了用 `var` 定义的函数表达式
function test() {
  console.log(a) //undefined
  {
    console.log(a) //undefined
    function a() {
      console.log('a')
    }
  }
  console.log(a) //[Function a]
  a() //a
}
test()
console.log(a) //ReferenceError: a is not defined

// Valid empty class definition
class Foo {}

// Valid class definition with constructor
class Bar {
  constructor() {}
}

// Valid class definition with getter
class Baz {
  get myBaz() {}
}

// Valid class definition with static method
class Qux {
  static myQux() {}
}

let Person = class PersonName {
  identify() {
    console.log(Person.name, PersonName.name)
  }
}

let p = new Person()

p.identify() // PersonName, PersonName

console.log(Person.name) // PersonName
console.log(PersonName) // ReferenceError: PersonName is not defined

class Person {}

// Create a new instance using the class
let p1 = new Person()

p1.constructor()
// TypeError: Class constructor Person cannot be invoked without 'new'

// Create a new instance using the reference to the class constructor
let p2 = new p1.constructor()

class foo {
  bar = 'hello'
  baz = 'world'
}

let a = new foo()
console.log(a) //foo { bar: 'hello', baz: 'world' }

class Person {}

console.log(Person.prototype) // { constructor: f() }
console.log(Person === Person.prototype.constructor) // true

class Person {}

let p = new Person()

console.log(p instanceof Person) // true

class Person {}

let p1 = new Person()

console.log(p1.constructor === Person) // true
console.log(p1 instanceof Person) // true
console.log(p1 instanceof Person.constructor) // false

let p2 = new Person.constructor()

console.log(p2.constructor === Person) // false
console.log(p2 instanceof Person) // false
console.log(p2 instanceof Person.constructor) // true

// Classes may be defined anywhere a function would, such as inside an array:
let classList = [
  class {
    constructor(id) {
      this.id_ = id
      console.log('instance ${this.id_}')
    }
  }
]

function createInstance(classDefinition, id) {
  return new classDefinition(id)
}

let foo = createInstance(classList[0], 3141) // instance 3141

let a = new (function (name) {
  this.name = name
})('clloz')
console.log(a) //{ name: 'clloz' }

// Because it is a class expression, the class name is optional
let p = new (class Foo {
  constructor(x) {
    console.log(x)
  }
})('bar') // bar

console.log(p) // Foo {}

let a = class B {}
console.log(a.name) //B
new B() //ReferenceError: B is not defined

let fn = function func() {}
console.log(fn.name)
func() //func is no defined

class Person {
    constructor() {
        // Everything added to 'this' will exist on each individual instance
        this.locate = () => console.log('instance');
    }

    // Everything defined in the class body is defined on the class prototype object
    locate() {
        console.log('prototype');
    }
}

let p = new Person();

p.locate(); // instance
Person.prototype.locate(); // prototype

//不能定义原始数据类型和对象
class Person {
    // name: 'Jake', //SyntaxError: Unexpected identifier
    test: {}; //SyntaxError: Unexpected identifier
    test: {};
}

//方法名可以使用 String Symbol 和 计算属性
const symbolKey = Symbol('symbolKey');
class Person {
 stringKey() {
  console.log('invoked stringKey');
 }
 [symbolKey]() {
  console.log('invoked symbolKey');
 }
 ['computed' + 'Key']() {
  console.log('invoked computedKey');
 }
}
let p = new Person();
p.stringKey();   // invoked stringKey
p[symbolKey]();  // invoked symbolKey
p.computedKey(); // invoked computedKey

//访问器属性
class Person {
    set name(newName) {
        this.name_ = newName;
    }
    get name() {
        return this.name_;
    }
}
let p = new Person();
p.name = 'Jake';
console.log(p.name); // Jake

class Person {
  sayName() {
    console.log('${Person.greeting} ${this.name}')
  }
}

// Define data member on class
Person.greeting = 'My name is'

// Define data member on prototype
Person.prototype.name = 'Jake'

let p = new Person()
p.sayName() // My name is Jake

class Parent {
  constructor(a, b) {
    this.a = a
    this.b = b
  }
  pFn1 = function () {} //能够作为构造函数
  pFn2() {} //TypeError: p.pFn2 is not a constructor
}

let p = new Parent()
new p.pFn1()
new p.pFn2()

class Person {
  constructor() {
    // Everything added to 'this' will exist on each individual instance
    this.locate = () => console.log('instance', this)
  }

  // Defined on the class prototype object
  locate() {
    console.log('prototype', this)
  }

  // Defined on the class
  static locate() {
    console.log('class', this)
  }
}

let p = new Person()

p.locate() // instance, Person {}
Person.prototype.locate() // prototype, {constructor: … }
Person.locate() // class, class Person {}

class foo {
  static bar = 'hello'
  baz = 'world'
  test() {
    console.log('haha')
  }
  static m = 'm'
}

let a = new foo()
console.log(a) //foo { bar: 'hello', baz: 'world' }
console.log(foo.bar, foo.m)

class Widget {
  foo(baz) {
    bar.call(this, baz)
  }
}

function bar(baz) {
  return (this.snaf = baz)
}

function Target() {
  console.log(new.target)
}
Target() //undefined
new Target() //[Function: Target]

//函数表达式
let Target = function targetName() {
  console.log(new.target)
}
Target() //undefined
new Target() //[Function: targetName]

class Rectangle {
  constructor() {
    console.log(new.target === Rectangle)
  }
}
class Square extends Rectangle {}
var obj = new Square() // 输出 false

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本类不能实例化')
    }
  }
}

class Rectangle extends Shape {
  constructor(length, width) {
    super()
  }
}

var x = new Shape() // Error: 本类不能实例化
var y = new Rectangle(3, 4) // 正确

class Vehicle {}

// Inherit from class
class Bus extends Vehicle {}

let b = new Bus()
console.log(b instanceof Bus) // true
console.log(b instanceof Vehicle) // true

function Person() {}

// Inherit from function constructor
class Engineer extends Person {}

let e = new Engineer()
console.log(e instanceof Engineer) // true
console.log(e instanceof Person) // true

class Vehicle {
  identifyPrototype(id) {
    console.log(id, this)
  }

  static identifyClass(id) {
    console.log(id, this)
  }
}

class Bus extends Vehicle {}

let v = new Vehicle()
let b = new Bus()

b.identifyPrototype('bus') // bus, Bus {}
v.identifyPrototype('vehicle') // vehicle, Vehicle {}

Bus.identifyClass('bus') // bus, class Bus {}
Vehicle.identifyClass('vehicle') // vehicle, class Vehicle {}

class Parent {
  constructor(a, b) {
    this.a = a
    this.b = b
  }
  pFn() {}
}
class Child extends Parent {
  constructor(a, b) {
    super(a, b)
  }
  cFn() {}
}

let c = new Child(1, 2)
console.log(c) //Child { a: 1, b: 2 }
console.log(Reflect.ownKeys(c.__proto__)) //[ 'constructor', 'cFn' ]
console.log(Reflect.ownKeys(c.__proto__.__proto__)) //[ 'constructor', 'pFn' ]

class Parent {
  constructor(a, b) {
    this.a = a
    this.b = b
  }
  pFn() {}
}
class Child extends Parent {
  constructor(a, b) {
    super(a, b)
  }
  cFn() {}
}

let c = new Child(1, 2)
console.log(c) //Child { a: 1, b: 2 }
console.log(Reflect.ownKeys(c.__proto__)) //[ 'constructor', 'cFn' ]
console.log(Reflect.ownKeys(c.__proto__.__proto__)) //[ 'constructor', 'pFn' ]

class Parent {
  constructor(a, b) {
    this.a = a
    this.b = b
  }
  pFn() {}
}
console.log(Parent.__proto__ === Function.prototype) //true
console.log(Parent.prototype) //{constructor: ƒ, pFn: ƒ}

class Child extends Parent {
  constructor(a, b) {
    super(a, b)
  }
  cFn() {}
}
console.log(Child.__proto__) //class Parent {}
console.log(Child.prototype) //Parent {constructor: ƒ, cFn: ƒ}

class A {}

class B {}

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype)

// B 继承 A 的静态属性
Object.setPrototypeOf(B, A)

const b = new B()

class A {
  fn() {
    console.log('A')
  }
}
A.prototype.x = 10

class B extends A {
  constructor() {
    super()
    //super 在赋值的时候相当于 this，在读取的时候则是指向父类的 prototype
    this.x = 2
    console.log(this.x)
    console.log(super.x)
    super.x = 3
    console.log(this.x)
    console.log(super.x)

    //父类 prototype 上的方法和属性的行为一样，读操作时指向是父类的 prototype，写操作则是写在 this 上
    this.fn() //A
    super.fn() //A
    console.log(this.hasOwnProperty('fn')) //false
    super.fn = function () {
      console.log('B')
    }
    this.fn() //B
    super.fn() //A
    console.log(this.hasOwnProperty('fn')) //true
  }
}

let b = new B()

function MyArray() {
  Array.apply(this, arguments)
}

MyArray.prototype = Object.create(Array.prototype, {
  constructor: {
    value: MyArray,
    writable: true,
    configurable: true,
    enumerable: true
  }
})

var colors = new MyArray()
colors[0] = 'red'
colors.length // 0

colors.length = 0
colors[0] // "red"

class MyArray extends Array {
  constructor(...args) {
    super(...args)
  }
}

var arr = new MyArray()
arr[0] = 12
arr.length // 1

arr.length = 0
arr[0] // undefined

class VersionedArray extends Array {
  constructor() {
    super()
    this.history = [[]]
  }
  commit() {
    this.history.push(this.slice())
  }
  revert() {
    this.splice(0, this.length, ...this.history[this.history.length - 1])
  }
}

var x = new VersionedArray()

x.push(1)
x.push(2)
x // [1, 2]
x.history // [[]]

x.commit()
x.history // [[], [1, 2]]

x.push(3)
x // [1, 2, 3]
x.history // [[], [1, 2]]

x.revert()
x // [1, 2]

class ExtendableError extends Error {
  constructor(message) {
    super()
    this.message = message
    this.stack = new Error().stack
    this.name = this.constructor.name
  }
}

class MyError extends ExtendableError {
  constructor(m) {
    super(m)
  }
}

var myerror = new MyError('ll')
console.log(myerror.message) // "ll"
console.log(myerror instanceof Error) // true
console.log(myerror.name) // "MyError"
console.log(myerror.stack)
// Error
//     at MyError.ExtendableError
//     ...

class NewObj extends Object {
  constructor() {
    super(...arguments)
  }
}
var o = new NewObj({ attr: true })
o.attr === true // false

class SuperArray extends Array {}

let a1 = new SuperArray(1, 2, 3, 4, 5)
let a2 = a1.filter((x) => !!(x % 2))

console.log(a1) // [1, 2, 3, 4, 5]
console.log(a2) // [1, 3, 5]
console.log(a1 instanceof SuperArray) // true
console.log(a2 instanceof SuperArray) // true

class SuperArray extends Array {
  get [Symbol.species]() {
    return Array
  }
}

let a1 = new SuperArray(1, 2, 3, 4, 5)
let a2 = a1.filter((x) => !!(x % 2))

console.log(a1) // [1, 2, 3, 4, 5]
console.log(a2) // [1, 3, 5]
console.log(a1 instanceof SuperArray) // true
console.log(a2 instanceof SuperArray) // false