es5里的类(自己写)
function Person(){
this.name = '张三';
this.age = 20;
}
var p = new Person();
p.name //张三
构造函数和原型链里增加方法
function Person(){
this.name = '张三'; //属性
this.age = 20;
this.run = function(){ //实例方法
console.log('xxx')
}
}
//通过原型链扩展属性
Person.prototype.sex = '女'
//通过原型链扩展实例方法
Person.prototype.work = function(){
return '程序员'
}
var p = new Person();
p.work(); //程序员
//原型链上的属性会被多个实例共享,构造函数不会
实例方法必须通过newPerson才能调用
//定义静态方法
Person.getInfo = fucntion(){
console.log('我是静态方法')
}
//调用
Person.getInfo();
es5中的继承
定义一个web类,继承Person类
两种方式1.原型链 2.对象冒充 3.组合
对象冒充
function Web(){
Person.call(this) //对象冒充实现继承
//Web继承了Person
}
var w = new Web();
w.run(); //xxx
w.work(); //报错
//对象冒充可以继承构造函数里的方法,但是没法继承原型链上的属性和方法
原型链实现继承
Web.prototype = new Person(); //原型链实现继承
var w = new Web();
w.work(); //程序员
w.run(); //xxx
//原型链继承:既可以继承构造函数中的属性和方法,也可以继承原型链上的属性和方法
原型链实现继承的问题:
实例化子类的时候没法给父类传参
function Person(name,age){
this.name = name; //属性
this.age = age;
this.run = function(){ //实例方法
console.log(name+'在运动')
}
}
Person.prototype.work = function(){
console.log(this.name+'是程序员')
}
var p = new Person('李四',20);
p.run(); //李四在运动
//web继承person
function Web(name,age){
}
Web.prototype = new Person();
var w = new Web('张三',20)
w.run(); //undefined在运动
原型链+构造函数的组合继承模式
function Web(name,age){
Person.call(this,name,age) //可以继承构造函数里的子类和方法
}
Web.prototype = new Person();
var w = new Web('张三',20)
w.run(); //张三在运动
w.work(); //张三是程序员
换种写法:
Web.prototype = Person.prototype
var w = new Web('张三',20)
w.run(); //张三在运动
w.work(); //张三是程序员
网友评论