浅析2种JavaScript继承方式
作者:bea
js继承方法最主要的是2种,一种是通过原型的方式,一种是通过借用call&apply的构造函数方式。 1.原型(prototype): function Body(name,age){// 创建一个Body类 this.name = name;// 赋予基础属性name、age this.age = age;}Body.prototype.sayName =function() {// 给原型定义一个sayName的方法 console.log(this.
js继承方法最主要的是2种,一种是通过原型的方式,一种是通过借用call&apply的构造函数方式。 1.原型(prototype):
function Body(name,age){// 创建一个Body类
this.name = name;// 赋予基础属性name、age
this.age = age;
}
Body.prototype.sayName =function() {// 给原型定义一个sayName的方法
console.log(this.name);
}
var a = new Body('wutao','10');//创建一个Body的实例对象
function Another(){}
Another.prototype = new Body('www');//将Body实例对象给新创建的子类(Another)的prototype属性,这样,Another就拥有了Body的属性和方法
var b = new Another();//创建Another子类的实例
Another.prototype.sex ="mail";//定义子类的属性及方法
Another.prototype.saySex = function(){
console.log(this.sex);
}
a.sayName();//wutao
b.sayName();//www 实例b拥有父类Body的方法sayName
b.saySex();//mail 实例b拥有自己定义的方法saySex
2.借用构造函数(call&apply),也可以理解为组合式继承 call:
function Person(name){
this.name = name;
this.sayHello = function(){
console.log(this.name);
}
}
function Son(name,age){
Person.call(this,name,age);//call用法:将this指针指向父类构造函数,并依次传入参数,使其拥有父类的属性和方法
this.age = age;
this.sayFunc = function(){
console.log(this.name+"-"+this.age);
}
}
var a = new Person('wutao');
var b = new Son("wwwwww",22);
a.sayHello();//wutao
b.sayHello();//wwwwww; 通过call继承来的父类Person的方法sayHello
b.sayFunc();//wwwwww-22
apply:
function Person(name){
this.name = name;
this.sayHello = function(){
console.log(this.name);
}
}
function Son(name,age){
Person.apply(this,[name,age]);//apply用法:类似call,将this指针指向父类构造函数,并传入一个由参数组成的数组参数,使其拥有父类的属性和方法
this.age = age;
this.sayFunc = function(){
console.log(this.name+"-"+this.age);
}
}
var a = new Person('wutao');
var b = new Son("ttt",222);
a.sayHello();//wutao
b.sayHello();//ttt;通过apply继承来的父类Person的方法sayHello
b.sayFunc();//ttt-222
js最主要的继承方法就这2种,当然,还有几种继承方法,但是有些继承方式在创建了实例之后,修改实例方法和属性会直接修改原型的方法和属性,那这样的继承就显得意义不大了,除非是业务有类似的需求才会去用到。
以上就是关于JavaScript继承方式的详细介绍,希望对大家的学习有所帮助。
有用 | 无用
function Body(name,age){// 创建一个Body类
this.name = name;// 赋予基础属性name、age
this.age = age;
}
Body.prototype.sayName =function() {// 给原型定义一个sayName的方法
console.log(this.name);
}
var a = new Body('wutao','10');//创建一个Body的实例对象
function Another(){}
Another.prototype = new Body('www');//将Body实例对象给新创建的子类(Another)的prototype属性,这样,Another就拥有了Body的属性和方法
var b = new Another();//创建Another子类的实例
Another.prototype.sex ="mail";//定义子类的属性及方法
Another.prototype.saySex = function(){
console.log(this.sex);
}
a.sayName();//wutao
b.sayName();//www 实例b拥有父类Body的方法sayName
b.saySex();//mail 实例b拥有自己定义的方法saySex
2.借用构造函数(call&apply),也可以理解为组合式继承 call:
function Person(name){
this.name = name;
this.sayHello = function(){
console.log(this.name);
}
}
function Son(name,age){
Person.call(this,name,age);//call用法:将this指针指向父类构造函数,并依次传入参数,使其拥有父类的属性和方法
this.age = age;
this.sayFunc = function(){
console.log(this.name+"-"+this.age);
}
}
var a = new Person('wutao');
var b = new Son("wwwwww",22);
a.sayHello();//wutao
b.sayHello();//wwwwww; 通过call继承来的父类Person的方法sayHello
b.sayFunc();//wwwwww-22
apply:
function Person(name){
this.name = name;
this.sayHello = function(){
console.log(this.name);
}
}
function Son(name,age){
Person.apply(this,[name,age]);//apply用法:类似call,将this指针指向父类构造函数,并传入一个由参数组成的数组参数,使其拥有父类的属性和方法
this.age = age;
this.sayFunc = function(){
console.log(this.name+"-"+this.age);
}
}
var a = new Person('wutao');
var b = new Son("ttt",222);
a.sayHello();//wutao
b.sayHello();//ttt;通过apply继承来的父类Person的方法sayHello
b.sayFunc();//ttt-222
js最主要的继承方法就这2种,当然,还有几种继承方法,但是有些继承方式在创建了实例之后,修改实例方法和属性会直接修改原型的方法和属性,那这样的继承就显得意义不大了,除非是业务有类似的需求才会去用到。
以上就是关于JavaScript继承方式的详细介绍,希望对大家的学习有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- jQuery移动web开发之页面跳转和加载外部页面的实现
- 详解JavaScript逻辑And运算符
- JavaScript encodeURI 和encodeURIComponent
- 详解JavaScript逻辑Not运算符
- 简要了解jQuery移动web开发的响应式布局设计
- jQuery1.9.1源码分析系列(十六)ajax之ajax框架
- jQuery使用$.ajax进行异步刷新的方法(附demo下载)
- Jquery1.9.1源码分析系列(十五)动画处理之外篇
- 写给小白的JavaScript引擎指南
- jQuery实现ajax调用WCF服务的方法(附带demo下载)
- jQuery旋转木马式幻灯片轮播特效
- jQuery中cookie插件用法实例分析
- JavaScript截取指定长度字符串点击可以展开全部代码
- 利用jQuery及AJAX技术定时更新GridView的某一列数据
- Javascript技术难点之apply,call与this之间的衔接
- 给before和after伪元素设置js效果的方法
- 全面解析Bootstrap手风琴效果
- 简单对比分析JavaScript中的apply,call与this的使用
- 详解JavaScript的Date对象(制作简易钟表)