前端必须要了解的一些知识 (七)

创建对象又几种方法

 

第一种：字面量

var o1 = {name: 'o1'};

var o2 = new Object({name: 'o2'});

第二种 通过构造函数

var M = function (name) { this.name = name; };

var o3 = new M('o3');

第三种 Object.create

var p = {name: 'p'};

var o4 = Object.create(p);

o4.__proto__===p//true

 

原型 构造函数 实例 原型链

 

 

 

instanceof的原理

 

 

严谨来判断用constructor

instanceof 并不是很严谨

 

 

new运算符背后的原理

原理如下

测试如下

 

面向对象

 

类与实例

类的声明

1，构造函数

fn Animal(){

this.name = 'name'

}

2，ES6class的声明

class Animal2 {

//↓↓构造函数

constructor(){

this.name=name

}

}

实例化类

console.log(new Animal(),new Animal2())

 

类与继承

继承的本质就是原型链

继承有几种形式各种的优缺点不同点

1借助构造函数实现继承

fn parent1（）{

this.name= 'parent1'

}

parent1.prototype.say(){

console.log('hello')

}

fn child1() {

parent1.call(this)

this.type='child1'

}

缺点 继承后parent1原型链上的东西 继承不say 并没有被继承 只能实现部分继承

如果方法都在构造函数上就能继承

2借助原型链实现继承

fn parent2(){

this.name= 'parent2'

this.play=[1,2,3]

}

fn child2() {

this.type='child2'

}

child2.prototype = new parent2()

var s1 = new Child2();

var s2 = new Child2();

s1.play.push(4);

 

缺点：如下 引用类型 不同的实例会全部变

 

3组合方式

前两种的方式的结合

fn parent3(){

this.name= 'parent3'

this.play=[1,2,3]

}

fn child3() {

parent3.call(this)

this.type='child2'

}

child3.prototype = new parent3()

var s3 = new Child3();

var s4 = new Child3();

s3.play.push(4);

console.log(s3.play,s4.play)

缺点：实例化的时候父构造函数执行了两次

//优化方式

fn parent4(){

this.name= 'parent4'

this.play=[1,2,3]

}

fn child4() {

parent4.call(this)

this.type='child4'

}

child4.prototype = parent4.prototype

var s5 = new Child4();

var s6 = new Child4();

console.log(s5 instance child4,s5 instance parent4)//true true

console.log(s5.constructor)//parent4

缺点：区分不了s5是child4还是parent4的实例

//优化方式

fn parent5(){

this.name= 'parent5'

this.play=[1,2,3]

}

fn child5() {

parent5.call(this)

this.type='child5'

}

child5.prototype = Object.creat(parent5.prototype)

//此时还是找不到 创建一下constructor可解决

child5.prototype.constructor = child5

var s7 = new Child5();

console.log(s7 instance child4,s7 instance parent4)//true true

console.log(s7.constructor)//child5