JavaScript中的原型和对象机制
1、对象相关的一些语言特性
JavaScript里所有的东西都是对象, 对象是属性的集合。要知道,函数也是对象, 能够作为变量的值、 返回值、 参数或者属性的值。 函数对象特殊的地方是能通过"xxx()"语法执行包含在xxx函数对象内的代码。
2、对象的属性可以动态添加和删除
var foo = new Object();
// 为foo对象添加bar属性
foo.bar = "foobar";
alert(foo.bar); //foobar
// 删除foo对象的bar属性
delete foo.bar;
alert(foo.bar); //undefined
3、创建对象
JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。例如,创建一个Array对象:
var arr = [1, 2, 3];
其原型链是:
arr ----> Array.prototype ----> Object.prototype ----> null
当我们创建一个函数时:
function foo() {
return 0;
}
函数也是一个对象,它的原型链是:
foo ----> Function.prototype ----> Object.prototype ----> null
4、构造函数创建对象
先定义一个构造函数:
function Student(name) {
this.name = name;
this.hello = function () {
alert('Hello, ' + this.name + '!');
}
}
上面的函数就是一个普通的函数,但是在JavaScript中,用关键字new来调用这个函数,他就是构造函数:
var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!
JavaScript的对象是由构造函数创建的, 每个对象都有constructor属性表示创建该对象的构造函数:
function Test() { this.a = "hello"; }
var test = new Test(); // 由Test构造函数创建
alert(test.constructor);
alert: function Test() { this.a = "hello"; }
构造函数也是对象, 构造函数是由内建的Function函数创建的:
function Test(a, b)
{
alert(a+b);
}
// 相当于:
Test = new Function(["a", "b"], "alert(a+b);");
Function是本机代码实现的固有对象. 不过为了一致性, Function也有constructor属性, 该属性指向它自己。
5、原型prototype
prototype是构造函数的一个属性, 该属性指向一个对象. 而这个对象将作为该构造函数所创建的所有实例的基引用(base reference), 当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefined。
/ prototype默认为new Object(); 为了方便, 记为p_obj
function Person(name) {
this.name = name;
}
// 为 p_obj 增加 sayName 属性
Person.prototype.sayName = function(){
alert(this.name);
}
var john = new Person("John"); // john 的 base reference指向p_obj
var eric = new Person("Eric"); // eric 的 base reference也是指向p_obj
// 注意sayName代码中的this将指向实例化后的对象(this绑定)
john.sayName(); // john对象本身没有sayName属性, 于是访问原型对象p_obj 的sayName属性
eric.sayName(); // 访问同一个原型对象p_obj的sayName属性
JavaScript中的原型和对象机制的更多相关文章
- (转载)JavaScript中的原型和对象机制
(转载)http://www.cnblogs.com/FlyingCat/archive/2009/09/21/1570656.html 1 对象相关的一些语言特性 1.1 一切皆为对象JavaScr ...
- 深入了解JavaScript中基于原型(prototype)的继承机制
原型 前言 继承是面向对象编程中相当重要的一个概念,它对帮助代码复用起到了很大的作用. 正文 Brendan Eich在创建JavaScript时,没有选择当时最流行的类继承机制,而是借鉴Self,用 ...
- JavaScript中的 原型 property 构造函数 和实例对象之间的关系
1 为什么要使用原型? /* * javascript当中 原型 prototype 对象 * * */ //首先引入 prototype的意义,为什么要使用这个对象 //先来写一个构造函数的面向对象 ...
- 【转】JavaScript中的原型和继承
请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...
- javascript 中的原型继承
javascript圆形变成的基本规则: 所有数据都是对象: 要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它: 对象会记住它的原型: 如果对象无法响应某个请求,它会把这个请求委托给 ...
- 理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
- javascript中的原型继承
在Javascript面向对象编程中,原型继承不仅是一个重点也是一个不容易掌握的点.在本文中,我们将对Javascript中的原型继承进行一些探索. 基本形式 我们先来看下面一段代码: <cod ...
- 图解JavaScript中的原型链
转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof o ...
- Javascript中双等号(==)隐性转换机制 JS里charCodeAt()和fromCharCode()方法拓展应用:加密与解密
Javascript中双等号(==)隐性转换机制 在Javascript中判断相等关系有双等号(==)和三等号(===)两种.其中双等号(==)是值相等,而三等号(===)是严格相等(值及类型是否 ...
随机推荐
- NCreport报表控件教程:设计页眉和页脚
一.设计页眉 一般来说页眉部分一般是用于包含标题的内容, 首先我们会添加列标签到页眉部分,标签都是简单的文本,标签项一般是用于在报表上显示一些描述信息,标签都是静态项,所以它们的值不会有变化. 添加标 ...
- ToJson
/// <summary> /// DataTable转成Json /// </summary> /// <param name="jsonName" ...
- Prince2七大流程之项目准备
Prince2七大流程之项目准备 今天我们正式进入七大流程的第一个流程学习,项目准备流程.决定项目是否值得做,是否值得启动.通过回答"是否有一个可交付的.值得做的项目?"这 ...
- 你年纪轻轻怎么这么"不讲理"
今天在公交上遇到一出"精彩的打戏",这给我的12月份带来了一丝的"惊喜",1号就能让我碰到这样的事,看来这个月会惊喜不断啊!!!! 这精彩的戏是这样的,公交到了 ...
- NetBean常用快捷键(MAC中)
shift+cmd+i:导入包 shift+alt+上:复制当前行,鼠标留在上一行 shift+alt+下:复制当前行,鼠标留在下一行 shift+ctrl+上:将选中行向上移动 shift ...
- CentOS 安装 Dubbo 管理控制台
安装之前需要安装zookeeper详情http://www.cnblogs.com/zuge/p/6141101.html Dubbo 管控台可以对注册到 zookeeper 注册中心的服务或服务消费 ...
- Storm入门2-单词计数案例学习
[本篇文章主要是通过一个单词计数的案例学习,来加深对storm的基本概念的理解以及基本的开发流程和如何提交并运行一个拓扑] 单词计数拓扑WordCountTopology实现的基本功能就是不停地读入 ...
- Android 网络开发之WIFI
WIFI就是一种无线联网技术,常见的是使用无线路由器.那么在这个无线路由器的信号覆盖的范围内都可以采用WIFI连接的方式进行联网.如果无线路由器连接了一个ADSL线路或其他的联网线路,则又被称为&qu ...
- sublime3添加对react代码检查
安装eslint npm install -g eslint npm install -g eslint-plugin-react 安装完后调用eslint --init 初始化,生成.eslintr ...
- smarty模板引擎
1. 使用smarty 1.1 项目引入 // 3, 连接数据库,提取相关数据 $title = "Smarty模板引擎"; $content = "Smarty模 ...