JS学习之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的方法同名的方法会怎么样?
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的对象方法,假如有下面这种写法:
ExtendClass.prototype = new BaseClass();指的是ExtendClass的原型指向BaseClass原型的属性
ExtendClass prototype = BaseClass;指的是ExtendClass的原型执行BaseClass本身。
JS学习之prototype属性的更多相关文章
- JS中的prototype属性
JavaScript是基于对象的,任何元素都可以看成对象.然而,类型和对象是不同的.本文中,我们除了讨论类型和对象的一些特点之外,更重要的 是研究 如何写出好的并且利于重用的类型.毕竟,JavaSc ...
- js学习笔记2---HTML属性操作
1.HTML属性操作:读.写 属性名 属性值 2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
- js学习笔记22----BOM属性和方法
BOM基本概念 : Browser Object Model 浏览器对象模型. BOM属性: window.navigator.userAgent : 浏览器信息 判断是否是某个浏览器,可以用 ind ...
- js函数prototype属性学习(二)
继续探讨js对象的prototype属性,前面已经看到在创建完一个对象之后,随时都会有一个_proto_属性伴随所有,那么,这个_proto_又是用来干嘛的,面试时问的高大上的原型链又是怎么回事? 拿 ...
- Javascript中prototype属性详解
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- Javascript中prototype属性的详解
原文链接:http://www.cnblogs.com/Uncle-Keith/p/5834289.html 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象 ...
- 论js中的prototype
今天在阅读代码时,碰到了prototype //判断是否是数组function isArray(obj) { return Object.prototype.toString.call(obj) == ...
- 详解Javascript中prototype属性(推荐)
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
随机推荐
- C语言入门(1)——C语言概述
1.程序与编程语言 我们使用计算机离不开程序,程序告诉计算机应该如何运行.程序(Program)是一个精确说明如何进行计算的指令序列.这里的计算可以是数学运算,比如通过一些数学公式求解,也可以是符号运 ...
- uva 215 hdu 1455 uvalive5522 poj 1011 sticks
//这题又折腾了两天 心好累 //poj.hdu数据极弱,找虐请上uvalive 题意:给出n个数,将其分为任意份,每份里的数字和为同一个值.求每份里数字和可能的最小值. 解法:dfs+剪枝 1.按降 ...
- thenjs的应用
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- php curl模拟post请求提交数据样例总结
在php中要模拟post请求数据提交我们会使用到curl函数,以下我来给大家举几个curl模拟post请求提交数据样例有须要的朋友可參考參考.注意:curl函数在php中默认是不被支持的,假设须要使用 ...
- 【leetcode边做边学】二分查找应用
很多其它请关注我的HEXO博客:http://jasonding1354.github.io/ 简书主页:http://www.jianshu.com/users/2bd9b48f6ea8/lates ...
- 【每日一摩斯】-Troubleshooting: High CPU Utilization (164768.1) - 系列6
如果问题是一个正运行的缓慢的查询SQL,那么就应该对该查询进行调优,避免它耗费过高的CPU资源.如果它做了许多的hash连接和全表扫描,那么就应该添加索引以提高效率. 下面的文章可以帮助判断查询的问题 ...
- 每个页面的Title样式
<style>.zc_lan14 {}{ TEXT-ALIGN: center; FONT-FAMILY: "微软雅黑"; MARGIN-BOTTOM: 3px; ...
- 在Prefetcher中取消robots.txt的限制
Robots.txt是一种专门用于搜索引擎网络爬虫的文件,当构造一个网站时,如果作者希望该网站的内容被搜索引擎收录,就可以在网站中创建一个纯文本文件robots.txt,在这个文件中,声明该网站不想被 ...
- C++之继承和动态内存分配
C++之继承和动态内存分配 如果基类使用动态内存分配,并重新定义赋值和复制构造函数,这将如何影响派生类的实现呢?这取决于派生类的属性,如果派生类也使用动态内存分配,这将如何实现呢?这种 ...
- git配置ssh
$ git config --global user.name "yourname"$ git config --global user.email "youremail ...