改变this指向
从this到继承
改变this指向的Function.prototype.bind(thisArgs)
function test(){
console.log(this);
}
test();
原函数
改变this指向的Function.prototype.call()
function test(){
console.log(this);
}
test.call(document);
call()
Function.prototype.call(thisArgs,e1,e2,e3...)//如果函数还有形式参数，传参数的时候参数放在e1...这些位置
function test(ele1,ele2,ele3){
console.log(ele1+ele2+ele3);
console.log(this);
}
test.call(document,1,2,3);
call带参数
改变this指向的Function.prototype.apply()
function test(ele1,ele2,ele3){
console.log(ele1+ele2+ele3);
console.log(this);
}
test.apply(document,[1,2,3]);
效果图
Function.prototype.apply(thisArg,[array])//这个函数与call的差别是第二个参数开始的差别
关于这三个函数的一些总结
prototype：原型对象，共享资源，每个函数对象都有 prototype 的显式属性
_ _ proto _ _：原型属性，每个对象都有 _ _ proto _ _的隐式属性
JS中的对象都是基于原型的对象。
Function.prototype.bind(thisArg)
返回新函数，新函数的函数主体与原函数一致，但当新函数被调用执行时，函数体中的 this 指向 thisArg 所表示的对象。如果 thisArg 未传递，或为 null，则新函数体中的 this 指向的是全局对象（浏览器中是 window 对象）
Function.prototype.call(thisArg, param1, param2, ....)
调用函数执行，在函数体执行过程中，this 指向 thisArg 所表示的对象。如果 thisArg 未传递，或为 null，则 this 指向全局对象（window）
param1, param2, .... 表示函数调用时所需要传递的实际参数列表。
Function.prototype.apply(thisArg, []|arguments)
调用函数执行，在函数体执行过程中，this 指向 thisArg 所表示的对象。如果 thisArg 未传递，或为 null，则 this 指向全局对象（window）
apply的第二个参数和 call 不一样，apply传递的是数组或类数组对象。
上面都说的是关于改变this的函数以及其代码实例
继承
继承的目的和函数封装函数复用有些相似，当然这只是一个方面。
student对象
function Student(name,sex,age,garde){
this.name = name;
this.age = age;
this.sex = sex;
this.garde = garde;
this.info = function(){
console.log( this.name, this.age , this.sex , this.garde);
}
}
teacher对象
function Teacher(name,sex,age,major){
this.name = name;
this.age = age;
this.sex = sex;
this.major= major;
this.info = function(){
console.log( this.name, this.age , this.sex , this.major);
}
}
可以看到这里代码是有多么的冗长
是否可以定义一个构造函数来存储这些重复的变量，然后让学生和老师这两个对象来继承他们相同的变量
function Person(name,sex,age){
this.name = name;
this.age = age;
this.sex = sex;
}
如何继承？
那是否可以使用call或者apply
构造函数继承
call()
apply()
function Student(name, sex, age, garde) {
Person.call(this,name, sex, age);
this.garde = garde;
this.info = function () {
console.log(this.name, this.age, this.sex, this.garde);
}
}
function Teacher(name, sex, age, major) {
Person.apply(this,[name, sex, age]);
this.major = major;
this.info = function () {
console.log(this.name, this.age, this.sex, this.major);
}
}
var stu = new Student("张三","男",18,"二年级");
var tea = new Teacher("李四","男",56,"语文");
stu.info();
tea.info();
完美继承
但是这两个函数只是把他们的属性做了一个继承，那么两个相同的方法怎么办？
原型链继承
这里将要使用
prototype：原型对象，共享资源，每个函数对象都有 prototype 的显式属性
_ _ proto _ _：原型属性，每个对象都有 _ _ proto _ _的隐式属性
JS中的对象都是基于原型的对象。注意，这句话是重点。
原型链
Student.prototype = new Person();
或
Student.prototype = Object.create(Person.prototype);
function Person(name,sex,age){
this.name = name;
this.age = age;
this.sex = sex;
}
Person.prototype.info = function(ele){
console.log(this.name, this.age, this.sex,ele);
}
Student.prototype = new Person();
function Student(name, sex, age ,garde) {
Person.call(this, name, sex, age);
this.garde = garde;
}
var stu = new Student("张三", "男", 18,"二年级");
stu.info( stu.garde);
nice
function Person(name,sex,age){
this.name = name;
this.age = age;
this.sex = sex;
}
Person.prototype.info = function(ele){
console.log(this.name, this.age, this.sex,ele);
}
Student.prototype = Object.create(Person.prototype);
function Student(name, sex, age) {
Person.call(this, name, sex, age,garde);
this.garde = garde;
}
var stu = new Student("张三", "男", 18,"二年级");
stu.info( stu.garde);
nice
组合继承
构造函数 + 原型链继承
其实就是上面的那种
class
语法糖，本质上还是ES5基于原型的继承：构造函数 + prototype
语法：
class 类名 {
constructor() { // 构造函数，constructor 是构造函数的固定名称
}
methodName1() { // 成员方法，相当于就是在 prototype 中定义的方法
}
methodName2() { // 成员方法，相当于就是在 prototype 中定义的方法
}
}
继承：
class 子类名 extends 父类名(超类、基类) {
constructor() { // 构造函数，constructor 是构造函数的固定名称
super(); // 调用父类的构造函数
}
methodName1() { // 成员方法，相当于就是在 prototype 中定义的方法
super.methodName(); // 调用父类的成员函数
}
methodName2() { // 成员方法，相当于就是在 prototype 中定义的方法
}
}
class Person{
constructor(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
info(){
console.log(this.name,this.age,this.sex);
}
eat(){
console.log("chi");
}
}
class Student extends Person{
constructor(name,age,sex,gared){
super(name,age,sex);
this.gared = gared;
}
info(){
console.log(this.name,this.age,this.sex,this.gared);
}
}
var stu = new Student("zhanshan",18,"nan","ernianji");
stu.info();
stu.eat();
nice
网友评论