js 实例、对象、继承 学习笔记

1 new 实例对象

实例：通过new方式实例的对象

原型对象：prototype，在构造函数里

构造函数和函数：不同的执行方式，this指向有所区别

function Foo(){
    this.a = 1;
}

var foo = new Foo();
console.log(foo);//{a:1}

2 prototype  __proto__   constrctor

2.1 原型：所有实例对象的共同祖先

function Foo(){
    this.a = 1;
}



Foo.prototype = {
    aa:10;
}

var foo = new Foo();

console.log(foo.aa);//

访问原型的方式：

1. 实例后的对象.__proto__  (不推荐)
2. 构造函数.prototype
3. Object.getPrototypeOf(实例后的对象)

原型的终点：Object.prototype     ES6

2.2 constructor

原型对象上的一个属性

指向对象的构造函数

定义原型的时候最好定义一下constrctor属性

3 对象的继承

3.1 原型链继承

引用值共享问题

Sub.prototype = new Super();

3.2 构造函数继承

function Super(){
    this.a = [1,2,3,4];
}
Super.prototype.say = function(){
    console.log(222);
}
 
function Sub(){
    Super.call(this);
}

var sub1 = new Sub();//拿不到sub原型super的say方法
var sub2 = new Sub();

没办法拿到原型上的方法

3.3 组合继承（伪经典继承）

function Super(){
    this.a = [1,2,3,4];
}
Super.prototype.say = function(){
    console.log(222);
}


function Sub(){
    Super.call(this);
}

Sub.prototype = new Super();//Sub的原型先继承一次Super的

var sub1 = new Sub();//调用时再Super.call(this)覆盖一次属性值
var sub2 = new Sub();

sub1.a = '333';//只有Sub1的a值改变了，sub2没改，所以引用值共享问题解决

sub1.say();//222
sub2.say();//222
//原型上的方法也可以拿到了

伪经典：调用两次super

3.4 寄生组合继承（经典继承）

function Super(){
    this.a = [1,2,3,4];
}
Super.prototype.say = function(){
    console.log(222);
}


function Sub(){
    Super.call(this);
}

//Sub.prototype = new Super();
Sub.prototype = Object.create(Super.prototype);//Object.prototype返回一个对象，使当前对象的原型为传入的参数
//让Sub的原型直接为Super的原型，绕过Super实例化的过程
//Object.create是ES5的方法，ES3中需要写兼容性方案
/*
if(!Object.create){
    Object.create = function(proto){
        function F(){}
        F.prototype = proto;
        return new F();
    }
}
*/


var sub1 = new Sub();
var sub2 = new Sub();

sub1.a = '333';

sub1.say();//222
sub2.say();//222

Sub.prototype如果在继承Super之前定义了方法，这些方法就会丢失

3.5 圣杯模式

function Teacher(){
    this.name = 'Mr. Li';
    this.tSkill = 'JAVA';
}

Teacher.prototype = {
    pSkill = 'JS/JQ';
}
 
var t = new Teacher();
console.log(t);

function Student(){
    this.name = 'Mr. Wang';
}

function Buffer(){}
Buffer.prototype = Teacher.prototype;
var buffer = new Buffer();
Student.prototype = buffer;
Student.prototype.age = 18;
var s = new Student();
console.log(s);
//圣杯模式

 

buffer将Teacher.prototype进行了一层封装，让student不能修改Teacher.prototype

3.6 ES6中class关键字

语法糖

class Super{
    
}
class Sub extends Super{}
//可以不定义constrctor,会自动定义

3.7 拷贝继承