js 原型规则与示例
五大规则
1. 所有的引用类型( 数组 对象 函数 ) 都是 具有对象特性即自由拓展属性 (除了 ”null“)意外
2. 所有的引用类型(数组 对象 函数 ) 都有一个 proto 属性属性值是一个普通的对象
3. 所有的函数 都有一个prototype 属性 ,属性值也是一个普通的对象
4. 所有的引用类型(数组 对象 函数),proto 属性值指向它的构造函数 ”prototype“ 属性值
5. 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性那么会去它的__proto__(即它的构造函数的prototype寻找)
示例
<script>
// 构造函数
function Foo(name , age){
this.name = name;
this.age = age;
this.class = "class-1";
return this; // 默认有这一行
}
var f = new Foo( "bobo" ,22); // 实例化对象
var a = {} 其实 是 var a = new Object();
var a = [] 其实 是 var a = new Array();
function Foo(){} 其实 是 var Foo = new Function();
使用instanceof 判断函数是否是一个变量的构造函数
如何判断一个变量是不是数组 : 用instanceof Array
// 二、原型规则和示例
// 原型规则是学习原型链的基础
1. 所有的引用类型( 数组 对象 函数 ) 都是 具有对象特性 即自由拓展属性 (除了 ”null“)意外
拓展性
var obj = {} ; a.age = 100;
var arr = [] ; b.a = 100;
function fn (){}
fn.a = 100;
2. 所有的引用类型(数组 对象 函数 ) 都有一个 proto 属性,属性值是一个普通的对象
// __proto__ 隐式类型
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);
3. 所有的函数 都有一个prototype 属性 ,属性值也是一个普通的对象
// prototype 显示类型
console.log( fn.prototype );
4. 所有的引用类型(数组 对象 函数),proto 属性值指向 它的构造函数 ”prototype“ 属性值
console.log( obj.__proto__ === Object.prototype)
5. 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性 那么会去它的__proto__(即它的构造函数的prototype寻找)
// 构造函数
function Foo(name , age ){
this.name = name ;
}
Foo.prototype.alertName = function(){
alert( this.name );
}
// 创建示例
var f = new Foo("zhangsan");
f.printName = function(){
console.log(this.name);
}
// 测试
f.printName();
f.alertName();
6. this
7. 循环对象自身的属性
var item ;
for( item in f ){
高级浏览器已经在 for in 中屏蔽了来自原型(prototype)的属性
但是这里建议大家还是加上这个判断
保证程序的健壮性
if( f.hasOwnProperty(item)){
console.log(item)
}
}
</script>
js 原型规则与示例的更多相关文章
- JS中的原型规则与原型链
1. 原型规则 A. 所有的引用类型(数组.对象.函数),都具有对象特性,即可自由扩展属性: var arr = []; arr.a = 1;B. 所有的引用类型(数组.对象.函数),都有一个_pro ...
- js原型
1.js基本类型和对象类型 js的简单类型包括数字(其中NaN为数字类型).字符串(类似'A'为字符,js没字符类型).布尔值.null值和undefined值.其他所有的值都是对象.数字.字符串和布 ...
- JS 原型链图形详解
JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...
- js 原型链和继承(转)
在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...
- js原型浅谈理解
之前在学习原型(prototype)的时候,一直对原型的理解不是很清晰,只是知道每个对象都有一个原型,然后在js中万物又皆对象.在这里谈一下自己对于js原型的简单理解吧. 原型可以实现属性和方法的共享 ...
- JS原型链与继承别再被问倒了
原文:详解JS原型链与继承 摘自JavaScript高级程序设计: 继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承 和 实现继承 .接口继承只继承方法签名,而实 ...
- JS(原型和原型链)
(学习自慕课网<前端JavaScript 面试技巧> JS(原型和原型链) 题目1.如何准确判断一个变量是数组类型 使用 instanceof 方法 题目2.写一个原型链继承的例子 实例: ...
- 【学习笔记】深入理解js原型和闭包系列学习笔记——精华
深入理解js原型和闭包笔记: 1.“一切皆是对象”,对象是属性的集合. 丨 函数也是对象,但是使用typeof时为什么函数返回function而 丨 不是object呢,js为何要对函数做这样的区分 ...
- 【学习笔记】深入理解js原型和闭包(12)——简介【作用域】
提到作用域,有一句话大家(有js开发经验者)可能比较熟悉:“javascript没有块级作用域”.所谓“块”,就是大括号“{}”中间的语句.例如if语句: 再比如for语句: 所以,我们在编写代码的时 ...
随机推荐
- golang 栈操作
Monk's Love for Food Our monk loves food. Hence,he took up position of a manager at Sagar,a restau ...
- dubbo filter链构建过程
public <T> Exporter<T> export(Invoker<T> invoker) throws RpcException { if (Consta ...
- Android 快速点击的处理
为了对付拥有麒麟臂的测试人员或者用户对我们的按钮等控件展开惨无人道的快速啄击.厮以为可以用如下方法: 1 setEnabled 大法:在用户点击发生后调用setEnable(false);阻止持续受到 ...
- 【练习】jQuery
作业要求: 参考下图,点击展示不同内容. 例: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Pyqt4的对话框 -- 预定义对话框
QinputDialog提供了一种获取用户单值数据的简介形式. 它接受的数据有字符串.数字.列表中的一项数据 # QInputDialog 输入对话框 # 本示例包含一个按钮和一个行编辑部件.单击按钮 ...
- 【链表】BZOJ1588: [HNOI2002]营业额统计
1588: [HNOI2002]营业额统计 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 17555 Solved: 7179[Submit][Sta ...
- gulp基于node流的自动化构建工具
GULP 在我才接触gulp的时候 看他就是一个 通过压缩各种文件来提升用户体验的开发工具 那是因为 对他的理解并不深 他真正强大 之处 在于他的 管子 .pipe() 可以 ...
- 数据结构-堆(应用篇)之堆排序法-C和C++的实现
堆排序 关于堆的内容我们已经在上一节中了解了,本节中将给出一个堆的应用-堆排序. 关于堆的概念可以看上一节,入口:http://www.cnblogs.com/HongYi-Liang/p/78536 ...
- 初学HTML5,你要懂得哪些?
很多人问过我这个问题,想要做HTML5页面你要懂得哪些知识?而问这个问题的人基本上都是刚听说过或刚接触HTML5,处在迷茫的阶段,他们往往会被一些网上炫酷页面所吸引,然后自己也想学习HTML5,能通过 ...
- 从头开始基于Maven搭建SpringMVC+Mybatis项目(3)
接上文内容,本节介绍基于Mybatis的查询和分页功能,并展示一个自定义的分页标签,可重复使用以简化JSP页面的开发. 从头阅读传送门 在上一节中,我们已经使用Maven搭建好了项目的基础结构,包括一 ...