js下的面向对象
本文记录了一种Javascript的面向对象方法及原理理解,示例代码如下:
//构造函数
var MClass = function(value1, value2) {
this.member = "hi";
//定义成员属性
Object.defineProperty(this, 'member1', {
value: value1
});
Object.defineProperty(this, 'member2', {
value: value2
});
} MClass.prototype.member0 = "bao"; //原型方法
MClass.prototype.sayHello = function() {
console.log(this.member + " " + this.member0);
console.log('hello ' + this.member1 + ' And ' + this.member2);
return this;
} //静态方法(类方法)
MClass.staticSayHello = function() {
console.log('hello ' + this.member0 + " " + this.member);
return;
} var entity = new MClass('fredric', 'sinny');
MClass.staticSayHello();
entity.sayHello().sayHello();
执行结果:
hello undefined undefined
hi bao
hello fredric And sinny
hi bao
hello fredric And sinny
//**********************************************************************************************************
补充一些基本概念
1、javascript 中所有都是对象,包含Object,也包括Function;
2、javascript 是一种面向对象的语言,但并非如C++和JAVA一样是面向类的继承,而是面向原型的继承;简单的讲是对象继承对象;
3、每个javascript对象都会有一个__proto__属性,这是一个内部属性,指向它继承的基类对象,这里叫原型对象;
function BASE(){
this.x = 1;
}
BASE.prototype.y = 2;
BASE.prototype.func(){
console.log("hello");}
如果此时 var a = new BASE(); 那么a的_proto_会指向BASE.prototype,注意没有this.x属性;
备注:这里的原型可以以原型链的形式不端继承。
那么x属性是如何继承的,我们要打开new的机制,在javascript中这个new其实做了三件事情;
1、创建一个新对象;
2、将新对象的_proto_属性指向原型,即prototype;
3、调用BASE的构造函数;就是BASE自己,此时a具备属性x;
因此我是这样理解的,function也是object,但不等价于object(这里指var a),至少有两点不同:1、具备构造函数,2、可以定义protorype,基于这两点因素,Function被用来实现javascript下的面向对象。
下面记录一个例子:
function TEST(n){
this.m = n
};
var a = new TEST(4);
TEST.prototype.test = 1;
TEST.prototype.testfunc = function(){
console.log("hello");
}
//a.prototype.test2 = 3; //编译出错
console.log(TEST.constructor);//[Function: Function]
console.log(TEST.__proto__);//[Function: Empty]
console.log(TEST.prototype);//{ test: 1, testfunc: [Function] }
console.log(a.__proto__);//{ test: 1, testfunc: [Function] }
console.log(a.constructor);//[Function: TEST]
console.log(a.prototype);//undefined
console.log(a.m);//
var TEST1 = function(){};
TEST1.prototype = new TEST(3);
TEST1.prototype.test1 = 4;
console.log(TEST1.prototype);//{ m: 3, test1: 4 } ,这里居然包含了m:3??
console.log(TEST1.__proto__);//[Function: Empty]
var b = new TEST1();
console.log(b.__proto__);//{ m: 3, test1: 4 }
b.testfunc();//hello
console.log(b.__proto__.test1);//
console.log(b.__proto__.__proto__);//{ test: 1, testfunc: [Function] } 这里是TEST的prototype,原型链
js下的面向对象的更多相关文章
- Day046--JavaScript-- DOM操作, js中的面向对象, 定时
一. DOM的操作(创建,追加,删除) parentNode 获取父级标签 nextElementSibling 获取下一个兄弟节点 children 获取所有的子标签 <!DOCTYPEhtm ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__
这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...
- 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__的原理介绍
这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...
- 原生JS下拉加载插件分享。
无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...
- js下拉框
Js下拉框 http://sc.chinaz.com/tag_jiaoben/XiaLaKuang.html
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- 小议 js 下字符串比较大小
原文:小议 js 下字符串比较大小 之前群里有人问如何比较两个时间大小,他的时间格式是 2014-08-08 而不是 2014-8-8.所以我给的方法是 直接比较,如: var a = "2 ...
随机推荐
- django admin后台提示没有static样式相关的文件
问题现象: 将 DEBUG = TEMPLATE_DEBUG = False 设置为False后,访问admin的管理后台,没有样式了. 解决办法: vim settings.py 确保有下面的这两 ...
- 【python】将一个正整数分解质因数
def reduceNum(n): '''题目:将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5''' print '{} = '.format(n), : print 'Pleas ...
- 新手看Mockplus
如今是一个快节奏的社会,每一天都会有无数的软件发布,每一款软件的制作过程不可避免的需要使用原型设计工具.而Mockplus就是一款原型设计软件,可以用于移动端,PC端以及WEB的原型设计.它也符合如今 ...
- HBase安装及简单使用
通过之前的hadoop0.20.2的安装并调试成功,接下来我们继续安装hbase0.90.5.在安装hbase0.90.5之前,因为hbase0.90.5只支持jdk1.6,所以,我把之前的jdk1. ...
- UWP的拖拽功能
简单的拖拽实现: <Grid x:Name="G1" AllowDrop="True" DragEnter="G1_DragEnter" ...
- 自己关于cocoapods的使用的一些理解和总结
老大让我自己学习用一下cocoapods的使用,于是自己上网查了很多的信息,在安装使用过程中,总是出现了很多问题,然后发现有些人的教程好像并不完全好用,我的感觉是应该每个人遇到的问题都不尽相同,所以 ...
- 一句话的代码,从集合中找出第一个重复字符的方法javascript版。
有的时候需求是这样的: 找出集合中第一个重复的字符所在的位置,刚才看了园内某自许为算法的代码,感觉非常之啰嗦故写了以下代码! 本人对神马算法之类的完全不懂,但那些伪算法家们也别出来装蒜.一句话:不要欺 ...
- Caring for our seniors
We all have our own journeys to make. And I have been thought that our journeys define us. Some jour ...
- extjs6环境
安装JDK http://www.oracle.com/technetwork/java/javase/downloads/ 安装到指定路径,例如D:\Java配置环境变量 此电脑—属性—高级系统设置 ...
- 设计模式可复用面向对象软件设计基础之对象创建型模式—ABSTRACT FACTORY( 抽象工厂)
意图 提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类. 适用性 在以下情况可以使用 Abstract Factory模式 • 一个系统要独立于它的产品的创建.组合和表示时. • 一 ...