屡战屡败,屡败屡战。
生活总是给我们无穷尽的打击。
磨我们的性子,让我们没有了棱角。
下面给大家分享一道面试中奖率120%的题:JS中的继承(至少我是被坑了6+)
还是老规矩,先上代码
function Base(name){
this.sex = 0;
this.name = name || 'base';
this.hello = function(){
console.log("hello " + name);
};
}
Base.prototype.say = function(){
console.log('name:'+this.name);
};
function Extend(name,num){
//让Base能初始化属性
Base.call(this,name);
this.num = num || 0;
}
//注意,这里是new Base()而不是Base.prototype
//因为new Base()是新建了一个对象,这样可以不会影响到Base.prototype
//否则如果直接操作Base.prototype,会污染Base.prototype
Extend.prototype = new Base();
//前面由于将prototype变为了new Base()所以构造方法默认是Base的
//这里需要手动替换回来
Extend.prototype.constructor = Extend;
var one = new Extend('one',2);
console.log(Extend.__proto__);//function () {}
console.log(one instanceof Extend);//true
console.log(one instanceof Base);//true
console.log(one.constructor === Extend);//true
console.log(one.__proto__ === Extend.prototype);//true
console.log(one.name);//one
console.log(one.sex);//0
console.log(one.num);//2
one.say();//name:one
one.hello();//hello one
面试只要写着一套绝对没有问题 perfect !
这里再给大家解释几个概念:
constroctor: 指向它的构造函数
__proctor__: 指向产生它的原型
call、apply和bindde 异同:
同:
1、都是用来改变函数的this对象的指向的。
2、第一个参数都是this要指向的对象。
3、都可以利用后续参数传参。
异:
1、call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。
2、call后面的参数与方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和方法中一一对应的
具体写法:
1、xw.say.call(xh)
2、xw.say.apply(xh)
3、xw.say.bind(xh)()
原型链图.png
完整的一条继承链:
new Extend() -> Extend.prototype -> Base.prototype ->Object.prototype -> null
盘古开天地,本来世界什么都没有,是null,后来衍生出来了Object.prototype,基于Object.prototype又产生了Function.prototype,他们都是函数对象
new object()、new function()都是实例对象
最后再上一个完整原型链图:
refer:
1、JavaScript筑基篇(三)->JS原型和原型链的理解
2、javascript中apply、call和bind的区别
网友评论
this.name = name;
this.age = age;
this.sex = 'man';
}
Person.prototype.sayHello = function () {
console.log(this.name + " " + this.age);
}
function Student (name, age, grade, sex) {
Person.call(this, name, age, sex);
this.grade = grade;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
var s1 = new Student('zhangyu', 18, 98);
console.log(s1.name);
console.log(s1.age);
console.log(s1.grade);
console.log(s1.sex);
s1.sayHello();