JavaScript对象——原型与原型链
原型与原型链
一. 普通对象与函数对象
- JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object 、Function 是 JS 自带的函数对象。下面举例说明
var o1 = {};
var o2 = new Object();
var o3 = new f1();
function f1(){};
var f2 = function(){};
var f3 = new Function('str');
typeof Object;//function
typeof Function;//function
typeof f1;//function
typeof f2;//function
typeof f3;//function
typeof o1;//object
typeof o2;//object
typeof o3;//object
在上面的例子中 o1 o2 o3 为普通对象,f1 f2 f3 为函数对象。怎么区分,其实很简单,凡是通过 new Function() 创建的对象都是函数对象,其他的都是普通对象。f1,f2,归根结底都是通过 new Function()的方式进行创建的。Function Object 也都是通过 New Function()创建的。
二.构造函数
function Person(name, age, job){
this.name = name;
this.age = age;
this.sayName = function(){
alert(this.name);
}
}
var person1 = new Person('mike',15);
var person2 = new Person('nike',18);
上例中person1和person2为Person的实例,两个实例中都有隐含的
constructor属性(通过原型对象继承得到),该属性指向构造函数Person
三.原型对象
- 我们创建的每个函数都有一个prototype(原型)属性,指向函数的原型对象。换句话说,prototype就是通过调用构造函数而创建的那个对象实例的原型对象,使用原型对象即可以让所有对象实例共享它所包含的属性和方法,可类比于父子类(继承)。
- 创建新函数时,其prototype属性指向的原型对象会自动获得一个constructor(构造函数)属性,该属性指向包含prototype的函数,也就是构造函数
function Person(name, age, job){
Person.prototpe.name = father;
Person.prototpe. = 28;
Person.prototpe.sayName = function(){
alert(this.name);
}
}
var person1 = new Person();
person1.sayName();//'mike'
var person2 = new Person();
person2.sayName();//'nike'
person1.sayName == person2.sayName;//true
person1.name = 'joy';
person1.sayName();//'joy'
通过为构造函数Person的原型对象创建属性,person1,person2将继承Person.prototype的属性,如果实例定义了与原型对象同名属性,原型对象属性则会被覆盖。
补充:更简单的原型语法
function Person(){}
Person.prototype = {
name:'',
age:'',
sayName:function(){
}
}
注意:该方法的原型对象的constructor属性不再指向Person,此时例中指向Object(新new的一个对象),如若需要可在Person.pertotype的字面量中添加:constructor:Person,
四.__proto__
JS 在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__ 的内置属性,用于指向创建它的构造函数的原型对象。
普通对象的__proto__指向这个对象(this)的构造函数的prototype;
函数对象的__proto__全部都是指向Function的prototype。
对象 person1 有一个 __proto__属性,创建它的构造函数是 Person,构造函数的原型对象是 Person.prototype ,所以:
person1.__proto__ == Person.prototype
不过,要明确的真正重要的一点就是,这个连接存在于实例person1与构造函数Person的原型对象Person.prototype之间,而不是存在于实例person1与构造函数Person之间。
js高级程序设计图
五.Prototype
当我们创建一个函数时:
var Person = new Object()
Person 是 Object 的实例,所以 Person 继承了Object 的原型对象Object.prototype上所有的方法:
六.Object.getPrototypeOf(obj)
获取对象的原型
总结
原型和原型链是JS实现继承的一种模型。
原型链的形成是真正是靠__proto__ 而非prototype
对象通过__proto__属性访问原型,构造函数通过prototype属性访问原型
Object 是所有对象的爸爸,所有对象都可以通过 proto 找到它
Function 是所有函数的爸爸,所有函数都可以通过 proto 找到它
Function.prototype 和 Object.prototype 是两个特殊的对象,他们由引擎来创建
除了以上两个特殊对象,其他对象都是通过构造器 new 出来的
函数的 prototype 是一个对象,也就是原型
对象的 proto 指向原型, proto 将对象和原型连接起来组成了原型链
JavaScript对象——原型与原型链的更多相关文章
- 细说JavaScript对象(2):原型对象
JavaScript 并没有类继承模型,而是使用原型对象 prototype 进行原型式继承. 尽管人们经常将此看做是 JavaScript 的一个缺点,然而事实上,原型式继承比传统的类继承模型要更加 ...
- JavaScript中的原型与原型链
一直对JavaScript的原型与继承不了解,参考<JavaScript权威指南(第六版)>和<JavaScript高级程序设计(第三版)>对这个点的知识做个整理,方便自己记忆 ...
- 25 JavaScript对象原型&ES5新的对象方法
JavaScript对象原型 所有JavaScript对象都从原型继承对象和方法 日期对象继承自Date.prototype,数组继承自Array.prototype,对象构造器新建的对象Person ...
- 细说JavaScript对象(4): for in 循环
如同 in 运算符一样,使用 for in 循环遍历对象属性时,也将往上遍历整个原型链. // Poisoning Object.prototype Object.prototype.bar = 1; ...
- 细说JavaScript对象(3):hasOwnProperty
判断一个属性是定义在对象本身而不是继承自原型链,我们需要使用从 Object.prototype 继承而来的 hasOwnProperty 方法. hasOwnProperty 方法是 JavaScr ...
- 细说JavaScript对象(1):对象的使用和属性
JavaScript 中的一切都可以视为对象,除了两个特例:null 和 undefined. false.toString(); // 'false' [1, 2, 3].toString(); / ...
- javascript中的对象,原型,原型链和面向对象
一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...
- 理解 JavaScript 对象原型、原型链如何工作、如何向 prototype 属性添加新的方法。
JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板.从原型继承方法和属性.原型对象也可能拥有原型, ...
- JavaScript对象原型链的学习
1.构造函数和原型 1.1对象的三种创建方式 字面量方式 var obj = {}; new关键字 var obj = new Object(); 构造函数方式 function Person(nam ...
随机推荐
- cesium随笔 — 获取当前鼠标的经度、纬度、高度
代码: function getPosition() { //得到当前三维场景 var scene = viewer.scene; //得到当前三维场景的椭球体 var ellipsoid = sce ...
- Exp4 恶意代码分析 20164323段钊阳
网络对抗技术 20164323 Exp4 恶意代码分析 1.如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控. ...
- 如何外部访问你的本地网站natapp
用natapp,要实名制才可以获得免得authtoken 1.注册登录: https://natapp.cn/tunnel/lists 2.这个要填写一下,端口我写的是3000 3.客户端下载 解压: ...
- “全栈2019”Java第一百章:局部内部类可以实现接口吗?
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- python接口自动化2-发送post请求详解(二)
前言 发送post的请求参考例子很简单,实际遇到的情况却是很复杂的,首先第一个post请求肯定是登录了,但登录是最难处理的.登录问题解决了,后面都简单了. 一.查看官方文档 1.学习一个新的模块,其实 ...
- Java中关键字final用法
///首先声明,本文转载自博客园的海子,链接:http://www.cnblogs.com/dolphin0520/p/3736238.html 浅析Java中的final关键字 谈到final关键字 ...
- C++基础知识-派生类、调用顺序、访问等级、函数遮蔽
一.派生类的概念 类之间有一种层次关系,有父亲类,有孩子类. 车这个类,当成父类(也叫基类.超类),派生出卡车.轿车,他们属于孩子类(子类.派生类) 继承:有父亲类,有孩子类,构成了层次关系.继承这种 ...
- KMP算法再解 (看毛片算法真是人如其名,哦不,法如其名。)
KMP算法主要解决字符串匹配问题,其中失配数组next很关键: 看毛片算法真是人如其名,哦不,法如其名. 看了这篇博客,转载过来看一波: 原博客地址:https://blog.csdn.net/sta ...
- leetcode-73-矩阵置零
题目描述: 给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 示例 1: 输入: [ [1,1,1], [1,0,1], [1, ...
- 2016级算法第六次上机-A.Bamboo之寻找小金刚
Bamboo之寻找小金刚 分析 可以抽象为许多连续线段,分别计数左拐和右拐的个数.考察叉积的基础应用. 假设ABC三点构成一个夹角∠ABC,B就是拐点,AC是辅助形成夹角.考虑线段AB和BC形成的向量 ...