本文记录了一种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下的面向对象的更多相关文章

  1. Day046--JavaScript-- DOM操作, js中的面向对象, 定时

    一. DOM的操作(创建,追加,删除) parentNode 获取父级标签 nextElementSibling 获取下一个兄弟节点 children 获取所有的子标签 <!DOCTYPEhtm ...

  2. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  3. 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  4. 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__

    这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...

  5. 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__的原理介绍

    这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...

  6. 原生JS下拉加载插件分享。

    无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...

  7. js下拉框

    Js下拉框   http://sc.chinaz.com/tag_jiaoben/XiaLaKuang.html

  8. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  9. 小议 js 下字符串比较大小

    原文:小议 js 下字符串比较大小 之前群里有人问如何比较两个时间大小,他的时间格式是 2014-08-08 而不是 2014-8-8.所以我给的方法是 直接比较,如: var a = "2 ...

随机推荐

  1. 强大的Spring缓存技术(中)

    好,到目前为止,我们的 spring cache 缓存程序已经运行成功了,但是还不完美,因为还缺少一个重要的缓存管理逻辑:清空缓存. 当账号数据发生变更,那么必须要清空某个缓存,另外还需要定期的清空所 ...

  2. Android Webview 调用JS跳转到指定activity

    JAVA: WebView wv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(save ...

  3. 长轮询(long polling)

    HTTP请求不是持续的连接,你请求一次,服务器响应一次,然后就完了.长轮训是一种利用HTTP模拟持续连接的技巧.具体来说,只要页面载入了,不管你需不需要服务器给你响应信息,你都会给服务器发一个Ajax ...

  4. 危险的“我以为”DDoS&丑陋的现实

    有些话题可能终其一生你也可以假装不知道就好了,比如全球气候在变暖,不过有些话题确是不得不面对的冰冷现实,在互联网日益发达的当下,比如你不得不面对的DDoS攻击. DDoS代表了分布式拒绝服务,通过许多 ...

  5. nopcommerce之一(结构分析)

    公司的项目,基于nopcommerce开发.接触项目至今已经快一个月了,对nopcommerce这个开源框架整个结构比较熟悉了.这个框架主要要知道三个文件夹,分别是Libraries.Plugins和 ...

  6. Hadoop2.6.0的事件分类与实现

    前言 说实在的,在阅读Hadoop YARN的源码之前,我对于java枚举的使用相形见绌.YARN中实现的事件在可读性.可维护性.可扩展性方面的工作都值得借鉴. 概念 在具体分析源码之前,我们先看看Y ...

  7. C#结构

    namespace STRUCT_TEST{ class Program { struct A { public int X;//不能直接对其进行赋值 public int Y; public sta ...

  8. layout优化实践

    昨天确定了启动时,inflate耗时太多,当时不知道怎么回事,去Trinea的博客一逛,发现原来是需要进行layout优化,跟着他们的步伐,做了下面的修改. 1.据说在lint前是一款layout工具 ...

  9. HTML5 Web Worker的使用

    Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Wo ...

  10. mybatis多数据源配置

    项目目录如下: 按照顺序配置吧 首先是配置config jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/a ...