学习javascript面向对象 理解javascript原型和原型链


Posted in Javascript onJanuary 04, 2016

先看一张图,梳理梳理。

学习javascript面向对象 理解javascript原型和原型链

一、基本概念  
【原型链】每个构造函数都有一个对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,如果原型对象等于另一个原型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。如果另一个原型又是另一个原型的实例,那么上述关系依然成立。如此层层递进,就构成了实例与原型的链条。
【原型对象】这个对象包含可以由特定类型的所有实例共享的属性和方法。所有引用类型默认都继承了Object,而这个继承也是通过原型链实现的。所有函数的默认原型都是Object的实例,因此默认原型都会包含一个内部指针,指向Object.prototype,这也正是所有自定义类型都会继承toString()、valueOf()方法的原因
【构造函数】构造函数与其他函数的区别在于调用它们的方式不同。一般来说,函数只要通过new操作符来调用,那它就可以作为构造函数;如果不通过new操作符来调用,那它跟普通函数也不会有什么两样。
[注意]用户自定义的函数和javascript中内置的构造函数可以当成构造函数使用
【构造函数的写法】构造函数始终应该以一个大写字母开头,而非构造函数以一个小写字母开头。这个做法借鉴自其他OO语言,主要是为了区别于ECMAScript中的其他函数;因为构造函数本身也是函数,只不过可以用来创建对象而已
【构造函数的三种使用场景】
[a]当作构造函数使用

var person = new Person("Nicholas",29,"software Engineer");
person.sayName();

[b]当作普通函数调用

Person("greg",27,"doctor");//添加到window
window.sayName();//"Greg"

[c]在另一个对象的作用域中调用

var o = new Object();
Person.call(o,"Kristen",25,"Nurse");
o.sayName();//"Kristen"

【prototype属性】只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。
[注意]只有函数才有prototype属性,object没有prototype属性
【constructor属性】在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针
[注意]创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性,至于其他方法则都是从Object继承而来的
【_proto_和[[prototype]]】当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。ECMA-262第5版管这个指针叫[[prototype]]。虽然在脚本中标准的方式访问[[prototype]],但firefox\safari\chrome在每个对象上都支持一个属性_proto_;而在其他实现中,这个属性对脚本则是完全不可见的。这个连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间
二、基本操作

【原型链查询】每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始,如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性,如果找到了这个属性,则返回该属性的值。
【添加实例属性】当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性;换句话说,添加这个属性只会阻止我们访问原型中的那个属性,但不会修改那个属性,即使将这个属性设置为null,也只会在实例中设置这个属性,而不会恢复其指向原型的连接。不过,使用delete操作符则可以完全删除实例属性,从而让我们能够重新访问原型中的属性。
【原型的动态性】由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能立即从实例上反映出来,即使是先创建了实例后修改原型也照样如此。
[注意]不推荐在产品化的程序中修改原生对象的原型

function Person(){};
var friend = new Person();
Person.prototype.sayHi = function(){
  alert('hi');
}
friend.sayHi();//"hi"

【重写原型】调用构造函数时会为实例添加一个指向最初原型的[[prototype]]指针,而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。实例中的指针仅指向原型,而不指向构造函数。
三、基本方法

[1]isPrototypeOf():判断实例对象和原型对象是否存在于同一原型链中,只要是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型

function Person(){};
var person1 = new Person();
var person2 = new Object();
console.log(Person.prototype.isPrototypeOf(person1));//true
console.log(Object.prototype.isPrototypeOf(person1));//true
console.log(Person.prototype.isPrototypeOf(person2));//false
console.log(Object.prototype.isPrototypeOf(person2));//true

[2]ECMAScript5新增方法Object.getPrototypeOf():这个方法返回[[Prototype]]的值

function Person(){};
var person1 = new Person();
var person2 = new Object();
console.log(Object.getPrototypeOf(person1)); //Person{}
console.log(Object.getPrototypeOf(person1) === Person.prototype); //true
console.log(Object.getPrototypeOf(person1) === Object.prototype); //false
console.log(Object.getPrototypeOf(person2)); //Object{}

[3]hasOwnProperty():检测一个属性是否存在于实例中

function Person(){
  Person.prototype.name = 'Nicholas';
}
var person1 = new Person();
//不存在实例中,但存在原型中
console.log(person1.hasOwnProperty("name"));//false
//不存在实例中,也不存在原型中
console.log(person1.hasOwnProperty("no"));//false
person1.name = 'Greg';
console.log(person1.name);//'Greg'
console.log(person1.hasOwnProperty('name'));//true
delete person1.name;
console.log(person1.name);//"Nicholas"
console.log(person1.hasOwnProperty('name'));//false

[4]ECMAScript5的Object.getOwnPropertyDescriptor():只能用于取得实例属性的描述符,要取得原型属性的描述符,必须直接在原型对象上调用Object.getOwnPropertyDescription()方法

function Person(){
  Person.prototype.name = 'Nicholas';
}
var person1 = new Person();
person1.name = 'cook';
console.log(Object.getOwnPropertyDescriptor(person1,"name"));//Object {value: "cook", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(Person.prototype,"name"));//Object {value: "Nicholas", writable: true, enumerable: true, configurable: true}

[5]in操作符:在通过对象能够访问给定属性时返回true,无论该属性存在于实例还是原型中

function Person(){}
var person1 = new Person();
person1.name = 'cook';
console.log("name" in person1);//true
console.log("name" in Person.prototype);//false
var person2 = new Person();
Person.prototype.name = 'cook';
console.log("name" in person2);//true
console.log("name" in Person.prototype);//true

[6]同时使用hasOwnProperty()方法和in操作符,来确定属性是否存在于实例中

//hasOwnProperty()返回false,且in操作符返回true,则函数返回true,判定是原型中的属性
function hasPrototypeProperty(object,name){
  return !object.hasOwnProperty(name) && (name in object);
}
function Person(){
  Person.prototype.name = 'Nicholas';
}
var person1 = new Person();
console.log(hasPrototypeProperty(person1,'name'));//true
person1.name = 'cook';
console.log(hasPrototypeProperty(person1,'name'));//false
delete person1.name;
console.log(hasPrototypeProperty(person1,'name'));//true
delete Person.prototype.name;
console.log(hasPrototypeProperty(person1,'name'));//false

[7]ECMAScript5的Object.keys()方法:接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组
[注意]一定要先new出实例对象再使用该方法,否则为空

function Person(){
  Person.prototype.name = 'Nicholas';
  Person.prototype.age = 29;
  Person.prototype.job = 'Software Engineer';
  Person.prototype.sayName = function(){
    alert(this.name);
  }  
};
var keys = Object.keys(Person.prototype);
console.log(keys);//[]
var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var keys = Object.keys(Person.prototype);
console.log(keys);//["name","age","job","sayName"]
var p1Keys = Object.keys(p1);
console.log(p1Keys);//["name","age"]

[8]ECMAScript5的Object.getOwnPropertyNames()方法:接收一个对象作为参数,返回一个包含所有属性的字符串数组
[注意]一定要先new出实例对象再使用该方法,否则只有constructor

function Person(){
  Person.prototype.name = 'Nicholas';
  Person.prototype.age = 29;
  Person.prototype.job = 'Software Engineer';
  Person.prototype.sayName = function(){
    alert(this.name);
  }  
};
var keys = Object.getOwnPropertyNames(Person.prototype);
console.log(keys);//["constructor"]
var p1 = new Person();
var keys = Object.getOwnPropertyNames(Person.prototype);
console.log(keys);//["constructor", "name", "age", "job", "sayName"]

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
PNG背景在不同浏览器下的应用
Jun 22 Javascript
JavaScript日历实现代码
Sep 12 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
写一个Vue Popup组件
Feb 25 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
详解Bootstrap创建表单的三种格式(一)
Jan 04 #Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 #Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 #Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 #Javascript
jQuery自动完成插件completer附源码下载
Jan 04 #Javascript
学习javascript面向对象 理解javascript对象
Jan 04 #Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 #Javascript
You might like
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Python @property装饰器原理解析
2020/01/22 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
大学生职业规划论文
2014/01/11 职场文书
请假条范文大全
2014/04/10 职场文书
个人安全生产责任书
2014/07/28 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
如何用python清洗文件中的数据
2021/06/18 Python