layout: post title: js继承 subtitle: js继承 date: 2017-03-06 author: CC header-img: img/post-bg-ios10.jpg catalog: true tags: - JS —
js继承
js中如何实现继承
- 原型链继承
- 构造函数继承
- 组合继承
- 拷贝继承
-
js原生的继承
- 原型链继承 缺点一：父类的属性通过子类的原型继承，就变成了子类原型中的一个属性，然后这个属性就变成了一个被共享的属性 缺点二：不能向超类型的构造函数传递参数 //父类 function SuperType(){ this.colors=[‘red’,’blue’,’green’]; }
//子类 function SubType(){}
//继承 SubType.prototype=new SuperType();
//实例化 var instance1=new SubType(); instance1.colors.push(‘black’); console.log(instance1.colors); //[‘red’,’blue’,’green’,’black’]
var instance2=new SubType(); console.log(instance1.colors); //[‘red’,’blue’,’green’,’black’]
- 构造函数继承 优点：解决了原型继承的缺点一， 如果只使用借用构造函数继承，方法就不能共享 所以我们一般会将借用构造函数继承和原型继承一起使用，就形成了组合继承 //父类 function SuperType(){ this.colors=[‘red’,’blue’,’green’]; }
//子类 function SubType(){ SuperType.call(this) }
//实例化 var instance1=new SubType(); instance1.colors.push(‘black’); console.log(instance1.colors); //[‘red’,’blue’,’green’,’black’]
var instance2=new SubType(); console.log(instance1.colors); //[‘red’,’blue’,’green’]
- 组合继承–最常用 var Person = function (name, age) { this.name = name; this.age = age; } Person.prototype = { eat: function () { return this.name + ‘在吃饭…’ } }
var Student=function(name,age,color){ Person.call(this,name,age); this.color=color; } Student.prototype=new Person(); Student.prototype.lick=function(){ return this.color }
var a=new Student(‘Tom’,’20’,’red’); console.log(a.eat()); console.log(a.lick()); console.log(a.name); js继承不常用，大致原理通过call方法可以访问到父类构造函数的属性和方法，但是原型里的方法只能通过子类原型等于父类的实例；
- 拷贝继承 就是拷贝方式 js不支持重载，因为js的变量存储的数据类型没有严格的限制，我们只能手动的判断数据类型，然后模拟重载。jq中非常常用的根据传递的参数来判断是设置属性还是获取属性 // Shape - superclass function Shape() { this.x = 0; this.y = 0; }
// superclass method Shape.prototype.move = function(x, y) { this.x += x; this.y += y; console.info(‘Shape moved.’); };
// Rectangle - subclass function Rectangle() { Shape.call(this); // call super constructor. }
// subclass extends superclass Rectangle.prototype = Object.create(Shape.prototype); Rectangle.prototype.constructor = Rectangle;
var rect = new Rectangle();
- js原生的继承 var person={ name:’Tom’, age:20, getName:function(){ alert(this.name) ; } }
var person1=Object.create(person); person1.getName(); //’Tom’
继承案例
//定义产品对象
function Base() {
/产品名称/
this.name = ‘’;
this.description = ‘’;
/普通价格/
this.normalPrice = 144;
/团购价格/
this.youhuijia = 120;
/已经购买的人数/
this.buySum = 100;
/轮播图片列表/
this.images = [];
}
Base.prototype = {
init: function () {},
/普通购买/
buy: function () {}, //这里是为空的，就是为了以后子类重写
/绑定图片列表/
bindDOMImage: function () {
var str = ‘’;
for (var i = 0, len = this.images.length; i < len; i++) {
str += ‘<li>’;
str += ‘’;
str += ‘
’;
str += ‘</li>’;
}
$(‘#etalage’).html(str);
/*jquery插件实现的幻灯片特效*/
$('#etalage').etalage({
thumb_image_width: 250,
thumb_image_height: 300,
});
},
/*绑定详细信息*/
bindDOMDetail: function () {},
/*绑定事件*/
bindEvents: function () {},
/*团购*/
groupBuy: function () {},
addCart: function () {} };
/衣服/ var Close = function () { Base.call(this, arguments); this.sizes = [‘X’, ‘XL’, ‘XXL’]; this.colors = [‘黄色’, ‘红色’]; }; /原型写法/ Close.prototype = new Base(); Close.prototype.bindDOMDetail = function () {}; Close.prototype.bindSizes = function () {}; Close.prototype.bindColors = function () { var str = ‘’; str += ‘<h3>颜色</h3>’; for (var i = 0; i < this.colors.length; i++) { str += ‘<li>’ + this.colors[i] + ‘</li>’; } $(‘.colors’).html(str); }; Close.prototype.init = function () { this.bindDOMDetail(); this.bindDOMImage(); this.bindSizes(); this.bindColors(); };
/电子书/ var Book = function () { Base.call(this, arguments); this.author = ‘糖葫芦’; this.publisher = ‘清华大学出版社’; this.pages = 333; this.publishTimes = 2; this.type = ‘IT教育’; this.publishTime = ‘2016-09-09’; }; /原型写法/ Book.prototype = new Base(); /重写 覆盖基类方法/ Book.prototype.bindDOMDetail = function () {}; Book.prototype.readTry = function () {}; Book.prototype.readAll = function () {}; Book.prototype.init = function () { this.bindDOMDetail(); this.bindDOMImage(); };
