构造函数/原型模式/call和apply/函数的继承

                                                    构造函数

<script type="text/javascript">

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

this.showName = function(){

alert(this.name);

}

this.showAge = function(){

alert(this.age);

}

this.showJob = function(){

alert(this.job);

}

}

//new的作用就相当于工厂模式中最开始创建了一个空对象,最后把对象返回

var Bob = new Person('bob',18,'产品汪');

Bob.showJob();

var Alex = new Person('alex',19,'运营喵');

Alex.showJob();

alert(Bob.showName == Alex.showName);//false

</script>

...................................................................................................................................................................

                                                原型模式

<script type="text/javascript">

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

Person.prototype.showName = function(){

alert(this.name);

}

Person.prototype.showAge = function(){

alert(this.age);

}

Person.prototype.showJob = function(){

alert(this.job);

}

}

//先去自己的对象中找showName函数,再去构造函数的原型找

var Lucy = new Person('lucy',18,'测试鼠');

//重写自身对象中的方法,不会影响其它对象

Lucy.showName = function(){

alert('我的名字是' + this.name);

}

Lucy.showName();//我的名字是lucy

var Lily = new Person('lily',19,'市场鸡');

Lily.showName();//lily

alert(Lucy.showName == Lily.showName);//false

</script>

...............................................................................................................................................................

                                      call和apply

call和apply的区别

二者都可以改变当前的this,区别在于apply方法要将参数放入数组中再传参

.........................................................................................................................................................

<script type="text/javascript">

function aa(a,b){

alert('我的this是' + this + ',我的a是' + a + ',我的b是' + b);

}

//我的this是[object Window],我的a是2,我的b是3

// aa(2,3);

//我的this是abc,我的a是2,我的b是3

// aa.call('abc',2,3);

//我的this是abc,我的a是2,我的b是3

aa.apply('abc', [2,3]);

</script>

.........................................................................................................................................................

                                                函数的继承

<script type="text/javascript">

//父类

function Fclass(name, age){

this.name = name;

this.age = age;

}

Fclass.prototype.showName = function(){

alert(this.name);

}

Fclass.prototype.showAge = function(){

alert(this.age);

}

//子类

function Sclass(name, age, job){

//属性用call或者apply的方式来继承

Fclass.call(this, name, age);

this.job = job;

}

//方法继承:将父类的一个实例赋值给子类的原型属性

Sclass.prototype = new Fclass();

Sclass.prototype.showJob = function(){

alert(this.job);

}

//由于已经继承了父类的属性和方法,所以可以直接调用

var Driver = new Sclass('tom',18,'老司机');

Driver.showName();

Driver.showAge();

Driver.showJob();

</script>

.........................................................................................................................................................

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 画了几天,觉得对自己来说,最难的可能不是运笔,而是读图。 准备的时间里,更多的是要仔细的看原图,分辨层次,然后从最...
    半世闲人阅读 306评论 1 1
  • 好久没发图了
    技能Mrboy阅读 211评论 0 1
  • 之前用过react,没有还使用过vue,今天先简单的把项目架起来~ 首先 脚手架先down下来 创建项目,安装依赖...
    _请输入昵称阅读 767评论 0 0