js种new的过程和js继承的记录

new操作符的工作原理是什么?它是怎么样改变构造函数的返回值和this指向的?

我们都知道new运算符是用来实例化一个类,从而在内存中分配一个实例对象。
如下: var person = new Person();
实际上经历了四个阶段:
1.创建一个新的对象;
2.将构造函数的作用域赋给新对象,(因此this就指向了这个新对象)
3.执行构造函数中的代码(为这个新对象添加属性)
4.返回新对象
具体来看代码如下过程:

 let person = {};
 person._proto_ = Person.prototype;
 Person.call(person)

这就是new操作符的操作全过程了。

js中常见的继承方式

1:原型继承

function Father(){
this.property = true;
}
Father.prototype.getValue = function(){
  return this.property;
}

function Son(){
this.Sonproperty = false;
}
//继承Father
Son.prototype = new Father();//原型重写,constructor被改写
Son.prototype.constructor = Son;//重写指向Son
Son.prototype.getSonValue = function(){
return this.property;
}
var instance = new Son();
console.log(instance.getValue());//true

原型继承的缺点有:
1:引用原型值会被所有实例共享
2:子类无法向父类传参

2:借用函数继承(经典继承)

//基本思想:在子类型构造函数中调用超类型的构造函数

function Father(){
this.colors = ['red','blue','green'];
name = 'haha';
}
function Son(){
Father.call(this);//继承Father,并向父类型传参
}
Son.prototype = new Father();
var instance1 = new Son();
instance1.colors.push('black');
console.log(instance1.colors);
var instance2 = new Son();
instance2.colors.push('pink');
console.log(instance2.colors);
//此种继承方法解决了原型链继承所存在的两个问题,但是依然存在构造函数无法复用的问题

3:组合继承(伪经典继承)--经常使用

此种组合继承的方法就是集合了上面两种方法的各自优点,
基本思路:使用原型链实现对原型属性和方法的继承,通过借用构造函数来实现对实例属性的继承

function Father(name){
this.name = name;
this.colors = ["red","pink","green"];
}

Father.prototype.sayname = function(){
console.log(this.name);
}

function Son(name,age){
Father.call(this,name);//使用构造函数进行实例属性的继承
this.age = age;
}

Son.prototype = new Father();//使用原型链继承超类型方法
Son.prototype.constructor = Son;//重新指向Son
Son.prototype.sayage = function(){
console.log(this.age);
}

var instance1 = new Son("lisi",12);
instance1.colors.push("brown");
console.log(instance1.colors);
instance1.sayname();
instance1.sayage();

var instance2 = new Son("hah",22);
instance2.colors.push("black");
console.log(instance2.colors);
instance2.sayname();
instance2.sayage();

你可能感兴趣的:(js种new的过程和js继承的记录)