继承_原型 (继承叫经典继承 也叫 混合继承)
一、
当B构造函数继承A构造函数的时候,在B构造函数中 借用A构造函数从而继承A构造函数里的属性
代码如下:
function A(name, age) {
this.name = name
this.age = age
}
function B(name, age) {
//借用父构造函数 来继承父构造函数里的属性
A.call(this,name,age)
}
var b = new B('小美', 16)
console.log(b); //B {name: "小美", age: 16}
二、
通过B构造函数的.prototype.方法名= A构造函数的.prototype.方法名 来继承原型上的方法
代码如下:
function A(name, age) {
this.name = name
this.age = age
}
A.prototype.say = function () {
//console.log(this.name);
}
function B(name, age) {
//借用父构造函数 来继承父构造函数里的属性
A.call(this, name, age)
}
B.prototype.say = A.prototype.say
var b = new B('小美', 16)
b.say()
console.log(b); //B {name: "小美", age: 16}
原型:prototype
在构造函数的原型上 添加一个方法 通过这个构造函数创建出来的对象 都共用原型上的方法
function A(name, age) {
this.name = name
this.age = age
}
//让所有 用A构造函数创建出来的对象 都共用一个say方法 原型:prototype
A.prototype.say = function () {
// console.log(this.name);
}
var a =new A('a',1)
var b =new A('b',1)
console.log(a.say==b.say);//true
new 操作符帮我们做了什么
分为四步:
1、创建了一个空对象this
2、将构造函数的作用域赋给新对象(也就是this现在指向
了这个新对象)
3、给空对象this 添加属性
4、返回这个this
function Person(name,age,sex){
//var this={} //new操作符背后帮我们已经var好了一个空的对象
this.name=name
this.age=age
this.sex=sex
//return this //普通函数需要return这个对象 构造函数中
// New操作符已经帮我们return了这个值 所以这里不需要
// 写return
}
var p=new Person('小米',18,'男')
console.log(p); //Person {name: "小米", age: 18, sex: "男"}
this指向
1、指函数的调用者
2、构造函数内的this指的是 即将创建的实例对象
3、绑定事件的dom元素
call apply bind 都可以改变this指向
var obj={
name:'张三',
say:function(str,str2){
console.log(this)//这里的this已经更改为{name: "李四"}
console.log(this.name+' '+str+' ' +str2);//李四 hello world
}
}
obj.say('hello') //张三 hello
obj.say.call({name:'李四'},'hello','world') //李四 hello world
obj.say.apply({name:'李四'},['hello','world']) //李四 hello world
obj.say.bind({name:'李四'},'hello','world')() //李四 hello world
如上代码 可以看出
call跟apply的用法几乎一样,唯一的不同就是传递的参数不同,call只能一个参数一个参数的传入。
apply则支持传入一个数组,哪怕是一个参数也要是数组形式。最终调用函数时候这个数组会拆成一个个参数分别传入。
bind方法,是直接改变这个函数的this指向并且返回一个新的函数,之后再次调用这个函数的时候this都是指向bind绑定
的第一个参数。bind传参方式跟call方法一致。