javascript学习小结之prototype


Posted in Javascript onDecember 03, 2015

JS中的prototype是JS中比较难理解的一个部分

本文基于下面几个知识点:

1 原型法设计模式
在.Net中可以使用clone()来实现原型法

原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。

2 javascript的方法可以分为三类:
a -> 类方法

b -> 对象方法

c -> 原型方法

例子:

function People(name){ 

  //对象属性
  this.name=name; 

  //对象方法 
  this.Introduce=function(){

     alert("My name is "+this.name); 

  }

}
​//类静态方法

​People.Run=function(){ 

alert("I can run");

}

​//原型方法

​People.prototype.IntroduceChinese=function(){ 

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

} 

​//测试

​var p1=new People("Windking");

p1.Introduce();//调用对象方法

People.Run();//调用静态方法

p1.IntroduceChinese(); //调用原型方法

3. obj1.func.call(obj)方法
意思是将obj看成obj1,调用func方法,本来调用的是obj1的func方法,但是,传入obj后,改变了上下文对象,就通过obj对象来调用ojb1的方法了

好了,下面一个一个问题解决:

prototype是什么含义?

javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。

A.prototype = new B();

理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。

先看一个实验的例子:

function baseClass(){

  this.showMsg = function(){

    alert("baseClass::showMsg");  

  }

}

function extendClass(){

}

extendClass.prototype = new baseClass();

var instance = new extendClass();

instance.showMsg(); // 显示baseClass:showMsg

我们首先定义了baseClass类,然后我们要定义extentClass,但是我们打算以baseClass的一个实例为原型,来克隆的extendClass也同时包含showMsg这个对象方法。

extendClass.prototype = new baseClass()就可以阅读为:extendClass是以baseClass的一个实例为原型克隆创建的。

那么就会有一个问题,如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样?

下面是扩展实验2:

function baseClass(){

  this.showMsg = function(){

    alert("baseClass::showMsg");  

  }

}

function extendClass(){

  this.showMsg =function (){

    alert("extendClass::showMsg");

  }

}

extendClass.prototype = new baseClass();

var instance = new extendClass();

instance.showMsg();//显示extendClass::showMsg

实验证明:函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。

那么又会有一个新的问题:

如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?

答案是可以使用call:

extendClass.prototype = new baseClass();

var instance = new extendClass();

var baseinstance = new baseClass();

baseinstance.showMsg.call(instance);//显示baseClass::showMsg

这里的baseinstance.showMsg.call(instance);阅读为“将instance当做baseinstance来调用,调用它的对象方法showMsg”

好了,这里可能有人会问,为什么不用baseClass.showMsg.call(instance);

这就是对象方法和类方法的区别,我们想调用的是baseClass的对象方法

最后,下面这个代码如果理解清晰,那么这篇文章说的就已经理解了:

function baseClass(){

  this.showMsg = function(){

    alert("baseClass::showMsg");  

  }

  

  this.baseShowMsg = function() {

    alert("baseClass::baseShowMsg");

  }

}

baseClass.showMsg = function(){

  alert("baseClass::showMsg static");

}

function extendClass(){

  this.showMsg =function (){

    alert("extendClass::showMsg");

  }

}

extendClass.showMsg = function(){

  alert("extendClass::showMsg static")

}

extendClass.prototype = new baseClass();

var instance = new extendClass();

instance.showMsg(); //显示extendClass::showMsg

instance.baseShowMsg(); //显示baseClass::baseShowMsg

instance.showMsg(); //显示extendClass::showMsg

baseClass.showMsg.call(instance);//显示baseClass::showMsg static

var baseinstance = new baseClass();

baseinstance.showMsg.call(instance);//显示baseClass::showMsg

以上就是关于javascript中prototype的深入学习,之后还有相关文章进行更新,希望大家继续关注。

Javascript 相关文章推荐
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
JS 数字转换研究总结
Dec 26 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
小程序实现抽奖动画
Apr 16 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
Vue3.0的优化总结
Oct 16 Javascript
简单实现JS对dom操作封装
Dec 02 #Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 #Javascript
JS折半插入排序算法实例
Dec 02 #Javascript
如何动态加载外部Javascript文件
Dec 02 #Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 #Javascript
JavaScript如何禁止Backspace键
Dec 02 #Javascript
js文本框输入内容智能提示效果
Dec 02 #Javascript
You might like
php多个文件及图片上传实例详解
2014/11/10 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
JS实现简单打字测试
2020/06/24 Javascript
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
Python操作Jira库常用方法解析
2020/04/10 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
Python截图并保存的具体实例
2021/01/14 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
学生安全承诺书
2014/05/22 职场文书
护理专科学生自荐书
2014/07/05 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫
Python闭包的定义和使用方法
2022/04/11 Python
Golang解析JSON对象
2022/04/30 Golang
Redis 限流器
2022/05/15 Redis