JS之prototype基础篇

function HiClass() {
	this.sayHi = function(){
		alert("hi");
	}
}

var obj = new HiClass(); 
alert(HiClass.prototype);//outputs [object, object]
alert(obj.prototype);//outputs undefined

在用prototype的方式实现继承一个类的时候,要注意其可能覆盖别的prototype方式添加的属性和方法。如果是HiClass.prototype.prop = ‘value‘;
在HiClass.prototype = new HelloClass();之前,执行HiClass.prototype = new HelloClass();之后,HiClass的实例中不会有prop属性,这个应该很好理解。但是要注意代码中不要不小心存在这样的bug。

function HiClass() {
	this.sayHi = function(){
		alert("hi");
	}
}

function HelloClass() {
	this.sayHello = function(){
		alert("hello");
	}
}
//HiClass.prototype.prop = ‘value‘;
HiClass.prototype = new HelloClass();
HiClass.prototype.prop = ‘value‘;

var obj = new HiClass();
obj.sayHello();
alert(obj.prop);

在JavaScript中有一个prototype链,在对一个对象实例上调用方法或者获取属性的时候,先看实例对应的类有没有对应的定义,没有的话会沿着prototype链一直找,找不到则为undefined。

function Object2() {
    this.sayHi = function(){
        alert("hi Object2");
    }
}

function Object3() {
    this.sayHi = function(){
        alert("hi Object3");
    }
    
    this.sayHello = function(){
        alert("hello Object3");
    }
    
}

Object2.prototype = new Object3();

var obj = new Object2();
obj.sayHi();
obj.sayHello();

Object.prototype.foo = function(){
    alert("f00 Object");
};
obj.foo();

调用obj.sayHi();的时候,sayHi在Object2里已经定义,则调用本身的定义。

调用obj.sayHello();的时候,sayHello在Object2里没有定义,但是由于prototype指向了Object3,则从Object3找,找到了执行。

调用obj.foo();的时候,sayHello在Object2和Object3里没有定义,但是由于JS中所有实例都会继承Object,所以可以在Object的prototype找到foo,然后执行。

如果在实例里添加的属性和方法与prototype里的属性和方法重名,相对于实例和prototype都有这个属性和方法,只是由于prototype链的访问顺序,先访问到实例中的属性和方法。如下面的例子说明了这一点:

function Test(){};

Test.prototype.prop1 = ‘prop value‘;

var obj = new Test();

obj.prop1 = ‘instance value‘;

alert(obj.prop1 );//outputs instance value

alert(obj.hasOwnProperty("prop1"));//outputs true

delete obj.prop1;alert(obj.prop1 ); //outputs prop value
alert(obj.hasOwnProperty("prop1"));//outputs false
alert("prop1" in obj);//outputs true

delete Test.prototype.prop1;alert(obj.prop1 );//outputs undefined
function TestCls(){

}
TestCls.prototype = {
	prop1:‘value1‘,
	prop2:‘value2‘
};
myObj = new TestCls();
alert(myObj.prop2);
时间: 2024-10-11 05:09:25

JS之prototype基础篇的相关文章

JS服务器端开发基础篇(Array.slice方法)

Array.slice方法在众多的JS数组中属于比较复杂的一个方法,搜索网络上很多资料都没有发现系统的总结.特别归纳如下,不完全处还希望各位批评指正. 格式: arrayObj.slice(start, [end]) 功能:返回指定数组的一个子数组,并不修改原来数组. 参数: start:必需.arrayObj的指定部分的开头. end:可选.arrayObj的指定部分的结尾. 数组使用来看,这个方法类似于串操作中的substr函数.但是,当参数为负数时,情况就复杂了. 具体情况详见下面的代码示

js 高级三 基础篇 (一)

还不容易 开篇了,本来不知道写点啥还是 记录 一下自己发现的亮点 : 1,  建议把全部引入的javascript 放在</body> 结尾 的前面 2, <script> 的defer (延期) 与 html5 的 async (异步) defer: 在外部js 加入defer = "defer" 例如: <script type="text/javascript" src="jquery-1.8.3.min.js"

JS基础篇--HTML DOM classList 属性

页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加类(add) document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").cla

js调试系列: 源码定位与调试[基础篇]

js调试系列目录: - 如果看了1, 2两篇,你对控制台应该有一个初步了解了,今天我们来个简单的调试.昨天留的三个课后练习,差不多就是今天要讲的内容.我们先来处理第一个问题:1. 查看文章下方 推荐 这个功能所调用的函数源码其实非常简单,点放大镜选中那个推荐即可.这个  votePost(cb_entryId,'Digg')  就是推荐按钮所调用的函数了,是不是非常简单. 第二个问题,定位到函数所在文件位置.其实也是非常简单的,当然,不熟悉控制台的朋友也许不知道怎么看.我在控制台输入 voteP

js调试系列:断点和动态调试[基础篇]

js调试系列: 断点与动态调试[基础篇] js调试系列目录: - js调试系列: 初识控制台 js调试系列: 控制台命令行API js调试系列: 源码定位与调试[基础篇] js调试系列: 断点与动态调试[基础篇] js调试系列: 调试基础与技巧 额,我说的不是张敬轩的 断点 这首歌,是调试用到的断点,进入正题吧. 昨天留的课后练习 1. 分析 votePost 函数是如何实现 推荐 的.其实我们已经看到了源码,只要读下源码即可知道他是怎么实现的了. 文本 function votePost(n,

js调试系列: 断点与动态调试[基础篇]

js调试系列目录: - 额,我说的不是张敬轩的 断点 这首歌,是调试用到的断点,进入正题吧. 昨天留的课后练习 1. 分析 votePost 函数是如何实现 推荐 的.其实我们已经看到了源码,只要读下源码即可知道他是怎么实现的了. function votePost(n, t, i) { i || (i = !1); var r = { blogApp: currentBlogApp, postId: n, voteType: t, isAbandoned: i }; $("#digg_tips

热烈庆祝《Vue.js 实战教程 V2.x(一)基础篇》上线了!

课程简介 课程地址:https://ke.qq.com/course/432961 机构名称:大华软件学院 授课讲师:大强老师 课程名称:Vue.js 实战教程 V2.x(一)基础篇 课程简介:包括前端发展史.Vue.js简介.第一个Vue.js程序.安装环境和Vue.Vue实例.模板语法.计算属性和侦听器.Class与Style绑定.条件渲染.列表渲染.事件处理.表单输入绑定.组件基础等等. 适合人群: 1.初出茅庐,想学习前端开发的同学: 2.没用过Vue.js,想学习更多框架的同学: 3.

Vue.js基础篇实战--一个ToDoList小应用

距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 主要功能就是把一天要做的事情记录下来,还实现了: 标记完成事件 删除已完成事件 各种排序 仅显示未完成的项目 本地保存 截图看这里 用时一周,14次commits,把心中的构想基本实现了.详情请看:这里 整个过程下来,收获还是很多的, 1.对mvvm有了进一步的理解, 2.对css布局有了更多的了解. 3.更进一步理解了Vue的事件和组件机制.这些机制将应用解耦,每一部分都隔离出来

Hybrid APP基础篇(四)-&gt;JSBridge的原理

说明 JSBridge实现原理 目录 前言 参考来源 前置技术要求 楔子 原理概述 简介 url scheme介绍 实现流程 实现思路 第一步:设计出一个Native与JS交互的全局桥对象 第二步:JS如何调用Native 第三步:Native如何得知api被调用 第四步:分析url-参数和回调的格式 第五步:Native如何调用JS 第六步:H5中api方法的注册以及格式 进一步完善JSBridge方案 思路 实现 注意 完整的JSBridge 完整调用流程图 另外实现:不采用url sche