扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
javascript的对象继承有几种方法?相信很多人对javascript的对象继承方法的了解处于一知半解状态,小编给大家总结了以下内容。如下资料是关于javascript的对象继承方法的内容。
十余年专注成都网站制作,成都企业网站定制,个人网站制作服务,为大家分享网站制作知识、方案,网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于成都企业网站定制,高端网页制作,对服务器托管等多个方面,拥有丰富的网站建设经验。
1原型链继承
所有的javascript 都会继承一个prototype原型对象 继承原型对象上的属性和方法。
例如:
date 对象 从Date.prototype 原型对象上继承属性和方法
array 对象 从Array.prototype 原型对象上继承属性和方法
要继承 必须有父类 ----子类继承父类 继承父类的属性和方法
特点:实例可以继承自身实例的属性 父类里面的构造函数属性 父类的原型属性
缺点:不能继承子类的原型属性和方法
太单一 只能单继承 不能进行多继承
继承之后原型对象上的属性全部是共享的
子类不能直接向父类传递参数
function Person() {
this.name;
this.sex;
this.sleep = function () {
return "睡觉";
};
this.eat = function () {
return "吃饭"
}
}
//给父类添加原型属性和方法
Person.prototype.job = function () {
return "工作";
};
Person.prototype.color = "黄";
function Child() {
this.age = 20;
}
Child.prototype = new Person(); //核心 让子类的原型 等于 父类的实例对象
var child = new Child();
console.log(Child.prototype);//继承之后指向Person 对象
console.log(child instanceof Child); ///true
console.log(child instanceof Person); //true
2构造函数
直接使用call apply 继承
构造继承直接在子类的内部去写
优点: 可以实现多继承;可以向父类传递参数
缺点: 子类的实例是本身 不是父类;构造继承只能call apply 父类对象的构造属性和方法 不能复制原型属性和方法
//父类
function Animail(s, a) {
this.sex = s;
this.age = a;
this.sleep = function () {
return "睡觉";
}
}
//Animal 添加原型属性
Animail.prototype.color = "花色";
//动物类别类
function Type(t) {
this.type = t;
}
//子类
function Cat(n, s, a, t) {
this.name = n;
this.eat = function () {
return "吃东西"
}
Animail.call(this, s, a);
Type.apply(this, [t]);
}
//实例化子类对象
var cat = new Cat("小猫", "公", 2, "猫科"); //类对象在实例化的时候会直接执行自身的构造函数
console.log(cat);
/检测构造继承里面的类别问题
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animail);//false
console.log(cat instanceof Type);//false
3实例继承
原理是在子类里面直接构造父类的实例
优点:可以传递给父类参数 不限制调用的方式
缺点:不能多继承;不能拿到子类的构造属性和方法
实例继承 子类的实例不是本身而是父类
//父类
function Person(n, s) {
this.name = n;
this.sex = s;
this.sleep = function () {
console.log(this.name + "睡觉");
}
}
//子类
function Child(n, s) {
var per = new Person(n, s);
return per;
}
//实例化子类对象
var child = new Child("张三", "女");
console.log(child instanceof Child);//false
console.log(child instanceof Person);//true
4拷贝继承
原理是 将父类里面的属性方法拷贝给子类
子类的实例是本身 不是父类
子类向父类传递参数
可以支持多继承
function Animal(n) {
this.name = n;
this.sleep = function () {
return this.name + "睡觉"
}
}
function Cat(n, a) {
this.age = a;
//拷贝
var animal = new Animal(n);
for (var p in animal) {
Cat.prototype[p] = animal[p];
}
//继续new 别的对象 进行拷贝
}
/* Cat.prototype.name="";
Cat.prototype.sleep=function (){
};*/
//实例化子类
var cat = new Cat("小花", 3);
console.log(cat);
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animal);//false
5组合继承
构造继承+原型链继承
子类的实例即是本身也是父类
没有原型对象属性的共享
实现多继承
调用了两次父类的构造函数
function Person(n) {
this.name = n;
this.sleep = function () {
return this.name + "睡觉";
}
}
Person.prototype = {
job: function () {
return this.name + "job";
}
}
function Child(n, a, s) {
this.age = a;
this.sex = s;
//构造继承
Person.call(this, n);
}
//原型链继承
Child.prototype = new Person();
var child = new Child("张三", 18, "男");
console.log(child);
console.log(child instanceof Child); //true
console.log(child instanceof Person);//true
6寄生组合继承
是处理组合继承的缺点 避免两次调用父类的构造函数
原理是把父类的原型给予一个空对象的原型
子类对象的实例即是本身也是父类
function Person(n) {
this.name = n;
this.sleep = function () {
return this.name + "睡觉";
}
}
console.log(Person.prototype);
function Child(n, a) {
this.age = a;
this.eat = function () {
return this.name + "吃饭"
}
Person.call(this, n);
}
//寄生
(function () {
var fn = function () {
};
//将父类的原型对象给予空对象
fn.prototype = Person.prototype;
Child.prototype = new fn();
})();
var child = new Child("李四", 20);
console.log(child);
console.log(child instanceof Child); //true
console.log(child instanceof Person); //true
关于javascript的对象继承的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果喜欢这篇文章,不如把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流