了解 JS 原型
原型概念
当创建了一个函数时,就会根据一组特定的规则为该函数创建一个 prototype 属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor 的属性 这个属性指向一个prototype
属性所在函数的指针
看个例子
function Person(){}
var friend = new Person();

当Person对象被创建后Person对象会有一个prototype属性,它指向了默认为Person创建一个原型对象 Person Prototype 这里边有个属性 constructor它保留了 对象Person的引用
如果继续为原型对象添加其它方法,其方法都会在 Person Prototype原型对象中
如果实例化了一个Person对象那他的实例同样也是会指向 Person的原型对象,从而最终对象的所有实例都可访问这个原型对象中的属性
原型对象共享
function Person(){}
Person.prototype.getName =function(){return "zhang"}
var person1 = new Person();
var person2 = new Person();
console.log(person1.getName()); //zhang
console.log(person2.getName());//zhang
因为对象实例中的[prototype]属性是指向原型对象的,所以给原型对象添加的方法对所有实例共享
原型重写
function Person(){}
Person.prototype.getName =function(){return "zhang"}
//重写原型对象
Person.prototype ={
//constructor:Person, //注:如果没有修正引用 则默认会指向Object
getName:function(){
return "Zhang"
}
}
某些情况下,想将原型对象中的方法定义在一个对象中时,可以直接重写原型对象。因为所有对象都是继承自Object对象,所以所果重写原型后没有将contructor的指向重新指回Person的话,其constructor属性就会默认指向Ojbect
如下例,也就是说重写后不进行重新指向,会切段对象与原型对象的关系
var friend = new Person.prototype.constructor();
console.log(friend.constructor == Object);//false
原型链
function SuperType(){}
SuperType.prototype.getName= function(){
return "Zhang";
}
function SubType(){}
SubType.prototype = new SuperType();
var sub = new SubType();
console.log(sub.getName()); //Zhang 可以访问Super原型对象的方法
//constructor指向了SuperType
console.log(SubType.prototype.constructor==SuperType) //true

原型中常用方法
getPrototypeof() //Object.getPropertyOf(obj)是ES5中用来得到obj对象的原型对象的标准方法 Object.getPrototypeOf(sub)==SubType.prototype //true
isprototypeOf //是用来判断要检查其原型链的对象是否存在于指定对象实例中,是则返回true,否则返回false
hasOwnprototype //是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员
hasPrototypeProperty //是否为原型对象的属性
__proto__ 就是prototype对象
了解 JS 原型的更多相关文章
- JS原型链
JS作为发展了多年了对象语言,支持继承,和完全面向对象语言不同的是,JS依赖原型链来实现对象的继承. 首先JS的对象分两大类,函数对象和普通对象,每个对象均内置__proto__属性,在不人为赋值__ ...
- 深入分析JS原型链以及为什么不能在原型链上使用对象
在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype:如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条).以下将会围绕 ...
- 【09-23】js原型继承学习笔记
js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...
- js原型
1.js基本类型和对象类型 js的简单类型包括数字(其中NaN为数字类型).字符串(类似'A'为字符,js没字符类型).布尔值.null值和undefined值.其他所有的值都是对象.数字.字符串和布 ...
- js原型链与继承(初体验)
js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...
- JS 原型链图形详解
JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...
- js原型解析
我们都知道javascript因为具有了继承以及变量等等一系列的特性之后才被人们认为具有一门编程语言的资格,在后续的不断发展中,js在原生的基础上扩展了基于jquery等等的库,甚至衍生了像node. ...
- 深入理解JS原型链与继承
我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...
- 学习zepto.js(原型方法)
学习zepto.js(原型方法)[1] 转载 新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase(): ...
- js原型链部分详细使用说明案例
1. 'index.html'文件 ```html <!DOCTYPE html> <html lang="en"> <head> <me ...
随机推荐
- SVG简介
最近遇到SVG这个名词,于是查阅资料,做个笔记. 前言 图片的数字化.将图片存储为数据有两种方案. 位图.也被称为光栅图.即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合.每个点发出的光有独 ...
- jQuery静态方法inArray,grep,merge,makeArray方法使用和源码分析
inArray方法 确定第一个参数在数组中的位置,从0开始计数(如果没有找到则返回 -1 ). 示例: var arr = [ 4, "Pete", 8, "John&q ...
- React-Native性能优化点
shouldComponentUpdate 确保组件在渲染之后不需要再更新的,即静态组件,尽量在其中增加shouldComponentUpdate方法,防止二次消耗所产生的性能消耗 shouldCom ...
- GPS各种地图坐标系转换(转载)
http://my.oschina.net/fankun2013/blog/338100 地图供应商比较多,产生了许多地图坐标.地图坐标正确转换是个问题.在之前开发地图应用的时候发现从WGS84坐标系 ...
- AngularJS在IE8的支持
AngularJS一般不会选择IE8支持, 因为很多特性在IE8下效果很差, 性能也不好, 但是由于项目的需要, 客户的机器有些是XP, 只能够装IE8, 所以为了解决这个, 我查阅了相关的资料,发现 ...
- 升级Xcode8、iOS10问题记录
1.webView的代理方法: 升级前: - (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)e ...
- maven工程模块化
前言 项目的模块化有利于任务分工,后期维护,易扩展,模块还可以独立成服务单独部署等: 创建packaging类型为POM的父项目 我用的maven插件是m2e,相信大部分人在eclipse装的也是m2 ...
- Oracle解锁,解决“ora00054:资源正忙”错误
Oracle解锁,解决“ora00054:资源正忙”错误 一.处理步骤:--1.获取被锁对象的session_idSELECT session_id FROM v$locked_object; --2 ...
- CentOS系统 yum 安装 iftop实时流量监控工具
一. 不多说其他的无用话题.直接看步骤: 1.要安装某个工具,首先得知道这个工具需要依赖包. eg:iftop 就依赖 以下这几个依赖包(不清楚工具依赖什么包“Google.百度”). flex ...
- Linux基础命令操作
显示日期与时间:date date +%Y/%m/%d date +%H:%M 显示日历:cal 显示一整年(cal 2009) 显示一年中的某一个月 (cal [[month]] year) 例如 ...