JS继承的原理、方式和应用

// "use strict" //严格模式（strict mode）即在严格的条件下运行，在严格模式下，很多正常情况下不会报错的问题语句，将会报错并阻止运行
//this是什么? JS关键字，在JS中具有特殊意义，代表一个空间地址 //this的指向，是在函数被调用的时候确定的。也就是执行上下文被创建的时候确定的 // 一、初始情况下 // 全局作用域下的this指向：即this和window指向同一个堆内存
this == window; //true
this === window; //true
// console.log("init," + this)
//二、函数和对象里的this的指向
var x = "x"; function test() {
var x = ;
// this.x = 2;
console.log(this);
console.log(this ? this.x : '');
}
//直接调用
// 严格模式下，如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象；如果函数独立调用，那么该函数内部的this，则指向undefined。
test(); // 非严格模式下调用相当于window.test(), this指向window;严格模式下this等于undefine

var y = ;
var Arrow = () => {
y = ;
console.log("arrow," + this);
console.log(this ? "arrow," + this.y : '');
};
Arrow(); //箭头函数条用时指向上下文this指向window，严格模式下也是指向window console.log("------------------------函数自调用------------------------")
//赋值调用
var obj = {
x: ,
fn: test,
fns: {
fn: test,
x: "FNC"
},
y: ,
Arrow: Arrow,
fnArrow: {
Arrow: Arrow,
y:
}
}
var fn = obj.fn; //定义变量相当于在window对象添加一个属性，window下调用给，他的上层对象就是window，所以this指向window
fn(); // 调用的是window.fn(), this指向window。严格模式下为undefined
obj.fn() //相当于window.obj.fn();this指向上层对象:obj;严格模式下也是指向上层对象
obj.fns.fn(); //this指向上层对象:fns;严格模式下也是指向上层对象
console.log("------------------------对象里面调用函数------------------------") obj.Arrow(); //严格模式下this指向window
obj.fnArrow.Arrow(); //严格模式下this指向window
console.log("------------------------对象里面调用箭头函数------------------------") //三、构造函数的this指向,构造函数在new实例化的过程中改变了this的指向，所以this指向当前函数的实例对象
function Structure() {
this.user = "二营长";
console.log(this)
}
var StructureArrow = () => {
console.log(this)
}
var a = new Structure(); console.log(a.user); //二营长
console.log("type," + Object.prototype.toString.call(StructureArrow)) // var sa = new StructureArrow(); //StructureArrow is not a constructor; new关键字只能实例化有prototype的函数对象，所以这里抛出异常 // 这里之所以对象a可以点出函数Structure里面的user是因为new关键字可以改变this的指向，将这个this指向对象a，
// 为什么我说a是对象，因为用了new关键字就是创建一个对象实例，
// 我们这里用变量a创建了一个Structure的实例（相当于复制了一份Structure到对象a里面），此时仅仅只是创建，并没有执行，
// 而调用这个函数Structure的是对象a，那么this指向的自然是对象a，那么为什么对象a中会有user，
// 因为你已经复制了一份Structure函数到对象a中，用了new关键字就等同于复制了一份。//四、箭头函数的this指向
console.log("------------------------箭头函数的this指向------------------------")
var ar = ; function arrows() {
var ar = ;
var f = () => {
console.log(this);
console.log(this ? this.ar : '');
}
return f();
}
var arrowsobj = {
ar: ,
fn: arrows,
fn1: () => {
console.log(this); //箭头函数将this指向当前环境上下文,即this指向全局环境中的this,即window
console.log(this ? this.ar : ''); //0 箭头函数将this指向当前环境上下文,即this指向全局环境中的this,即window
},
fn2: function() {
setTimeout(() => {
console.log(this); //指向arrowsobj
console.log(this ? this.ar : ''); //
}, )
},
fnc: {
fn1: () => {
console.log(this); //箭头函数将this指向当前环境上下文,即this指向全局环境中的this,即window
console.log(this ? this.ar : ''); //0 箭头函数将this指向当前环境上下文,即this指向全局环境中的this,即window
}
}
};
arrows(); //非严格模式下为this.ar 为0；严格模式下报错 arrowsobj.fn(); //this.ar 为2；严格模式下报错箭头函数将this指向当前环境上下文,即this指向test中的this,即arrowsobj
// arrowsfn();
arrowsobj.fn1();
arrowsobj.fn2();
arrowsobj.fnc.fn1(); console.log("------------------------事件里面的this指向------------------------")
//五、事件里面的this指向
//事件绑定
var btn = document.querySelector("body");
btn.onclick = function() {
console.log(this) // 调用的是btn.onclick, this指向body
}
//事件监听
var btns = document.querySelector("html")
btns.onclick = function() {
var timers = setTimeout(() => {
console.log(this) //上下文对象是body
}, ); }
// this指向window
// 全局作用域下的this都是：即this和window指向同一个堆内存；
// 自执行函数中的this都是
// 函数作为参数里面的this一般都是
// 回调函数中的this指向；
// 递归函数中的this指向； // this不是window // 函数执行的时候判断函数前面是否有点，如果有点，前面是谁this就是；如果没有点this就是；
// 给当前元素某个事件绑定方法，元素触发事件，事件中的；
// 构造函数中的；
// 通过call apply bind可以改变this指向，指向谁就是谁；
// 箭头函数中没有this；

// 在js中万物皆对象，对象又分为两种：普通对象（Object）和函数对象（Function）。
// prototype:每一个函数都有一个prototyp属性 这个属性指向一个对象 这个对象叫做原型对象;
//constructor:构造器，指向创建自己的那个构造函数
// __proto__:每一个对象都有一个_proto_属性，这个属性指向一个对象，这个对象是原型对象
// 原型对象里面有2个属性：constructor，__proto__   
// 任何对象都具有隐式原型属性（__proto__），只有函数对象有显式原型属性（prototype）。
//  原型链：由__proto__组成的链条叫做原型链 (访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着_proto_这条链向上找，这就是原型链。)
function fn() {
console.log("fn")
}
console.log(fn);
console.dir(fn);
// 一.函数对象和一般对象
var Literal = function() {
console.log("Literal")
}
console.log(Literal) //输出函数自身，字符串
console.dir(Literal) //输出对象 var f = new Function("arg", "statement");
console.dir(f); //注意：由上面两条得出,字面量函数和关键字函数都拥有这两个特殊的属性__proto__和prototype var newLiteral = new Literal(); console.log(newLiteral) //输出对象
console.dir(newLiteral) //输出对象
//new关键字的构造函数，相当于实例化一个对象，将实例的函数重新拷贝一份，所以只有__proto__ var obj = {
fn: function() {
console.log("")
}, //拥有__proto__和prototype
newfn: new fn(), //new关键字的构造函数，相当于实例化一个对象，将实例的函数重新拷贝一份，所以只有__proto__
obj: {}, //__proto__
arr: [], //__proto__
x: '',
type: null
};
console.log(obj); // new一个对象时，会经历以下几个步骤（摘自javascript高级程序设计）：
// （1）创建一个对象；
// （2）将构造函数的作用域赋值给新对象（因此this就指向了这个新对象）；
// （3）执行构造函数中的代码（为这个新对象添加属性）；
// （4）返回新对象 // 创建了一个全新的对象。
// 这个对象会被执行 [[Prototype]]（也就是 proto）链接。
// 生成的新对象会绑定到函数调用的 this。
// 通过 new创建的每个对象将最终被 [[Prototype]]链接到这个函数的 prototype对象上。
// 如果函数没有返回对象类型 Object(包含 Functoin, Array, Date, RegExg, Error)，那么 new表达式中的函数调用会自动返回这个新的对象。 Object.prototype.__proto__ == null Object.__proto__ == Functon.prototype Function.protype.__proto__ == Object.prototype Function.__proto__ == Function.prototype
// 原型链都指向了null对象,也就是正常的结束,不会死循环