JS学习记录之原型链、继承、变量提升

原型链

__proto__ 和 prototype

定理:

1. 所有的构造器对象都是由Function创建出来的(包括Function自己)

Object    Boolean    String     Number     Function     Array      RegExp      Date     Error  
以上是构造器对象都是Function的实例

2. 实例对象拥__proto__属性，对象(类)拥有prototype, 如果同时拥有这2个属性,证明它是Function的实例对象也是对象(类),反过来说如果是Function的实例对象就会有__proto__和prototype属性

Object    Boolean    String     Number     Function     Array      RegExp      Date     Error  
以上是构造器对象都是Function的实例也都会有__proto__和prototype属性

3. 所有的实例对象的__proto__属性都指向,该对象(类)的prototype

通过这个结论得知:Object    Boolean    String     Number     Function     Array      RegExp      Date     Error
的__proto__都是相等的,因为他们都是Function实例指向Function.prototype

既：
Object.__proto__ === Boolean.__proto__  === 
String.__proto__ === Number.__proto__ === 
Function.__proto__ === Array.__proto__ === 
RegExp.__proto__ === Date.__proto__ === Error.__proto__

特殊的Function
Function.__proto__ === Function.prototype  因为Function是Function创建的所以根据定理3得出此条

4.constructor指向该实例对象的构造对象

Object.constructor === Function
Object.constructor.__proto__ === Function.__proto__
Object.constructor.prototype === Function.prototype
Object.constructor.__proto__ === Function.prototype
Object.constructor.prototype === Function.__proto__
Function.__proto__ === Function.prototype

复合继承

1. call继承属性
2. 原型继承方法
3. 改变constructor(构造器)的指向

// 定义类型
function Ponse(name,age){
    // 定义属性
    this.name = name;
    this.age = age;
};
// 定义方法
Ponse.prototype.getName = function(){
    return this.name;
}
// 定义方法
Ponse.prototype.getAge = function(){
    return this.age;
}

// 定义类型
function Student(name,age,number){
    // 属性继承
    // 用call改变Ponse的this指向当前创建的对象，将Ponse的属性挂载到当前对象上
    Ponse.call(this,name,age);
    this.number = number;
}
// 方法继承, 继承getName和getAge方法,将Student.prototype指向ponse的实例就可以拥有ponse的方法
Student.prototype = new Ponse();
Student.prototype.getNumber = function(){
    return this.number;
}
// 上面将prototype指向了Ponse的实例对象,那么Student.prototype.constructor(构造器)就是Ponse了
// 将构造器更改为Student, 否则创建出来的对象的构造函数式Ponse
Student.prototype.constructor = Student;


var zhangfei = new Student("张飞","25","0513");
console.log(zhangfei.getName(),zhangfei.getAge(),zhangfei.getNumber(),zhangfei.constructor);

变量提升函数提升

1. 变量提升,在代码运行之前会先变量提升给变量赋初始值undefined,

console.log(name)  // 报错 
// VM969:1 Uncaught ReferenceError: nameis not defined

console.log(name);    // 此时会输出undefined 证明变量已经存在但未赋值
var name = "张飞";

上面代码执行时就等于

var name;
console.log(name);    // 此时会输出undefined 证明变量已经存在但未赋值(初始值是undefined)
name = "张飞";

2. 函数提升,在代码运行之前会函数提升

fun(); // 会正常运行  弹出"张飞"
function fun(){
  alert("张飞");
}

上面代码执行时就等于

function fun(){
  alert("张飞");
}
fun(); // 会正常运行  弹出"张飞"

3. 变量提升和函数提升先执行哪个呢？ 先变量提升在函数提升

fun() // 此时会正常输出“张飞”
function fun(){
    alert("张飞");
}
var fun = 123;

上面代码运行时如下

var fun;
function fun(){
  alert("张飞");
}
fun();
fun = 123;

思考:

fun();
var fun = function(){
    alert("张飞");
}
// 执行结果是fun is not a function 说fun不是一个函数, 这里用的是var所以是变量提升
// 变量提升的特征是先声明变量同时初始化变量为undefined, 所以调用失败
// 上面的代码在运行时是这样的
var fun;
fun();
fun = function(){
  alert("张飞");
}

var name = "张飞";
function fun(){
  alert(name);
  var name = "关羽";
}
fun(); // 会弹出"undefined"

// 运行时代码如下
var name;   // 全局变量提升
function fun(){
  var name;  // 局部变量提升
  alert(name);
  name = "关羽"; // 局部变量赋值
}
name = "张飞"; // 全局变量赋值
fun();

function fun(){
  fun2 = function (){
    alert("fun2");
  }
}
fun();
fun2(); // 会打印“fun2”
// 运行时代码如下
var fun2;
function fun(){
  fun2 = function (){
    alert("fun2");
  }
}
fun(); // 执行给fun2赋值
fun2(); // 执行fun2

// 那么我们这样写会怎么样
function fun(){
  var fun2 = function (){
    alert("fun2");
  }
}
fun();
console.log(fun2); // 报错
fun2(); // 报错
// 因为fun2是 fun的局部变量外界访问不到