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同意等待代码实现心得
Jan 01 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
社区(php&&mysql)三
2006/10/09 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
javascript闭包入门示例
2014/04/30 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
VsCode插件整理(小结)
2017/09/14 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
简明 Python 基础学习教程
2007/02/08 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
python dataframe NaN处理方式
2019/12/26 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
使用Python发现隐藏的wifi
2020/03/04 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
Python Map 函数的使用
2020/08/28 Python
Python爬取网页信息的示例
2020/09/24 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
环境工程毕业生自荐信
2013/11/17 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
毕业赠语大全
2015/06/23 职场文书
旷工检讨书大全
2015/08/15 职场文书
高中美术教学反思
2016/02/17 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL