一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我)__被在此绕晕,图片就放在末尾了。)

以下三点需要谨记

1.每个对象都具有一个名为__proto__的属性;

2.每个构造函数(构造函数标准为大写开头,如Function(),Object()等等JS中自带的构造函数,以及自己创建的)都具有一个名为prototype的方法(注意:既然是方法,那么就是一个对象(JS中函数同样是对象),所以prototype同样带有__proto__属性);

3.每个对象的__proto__属性指向自身构造函数的prototype;

思路扩展如下

 1             function Fun(){
2 }
3 // 我创造了一个函数Fn
4 // 这个函数由Function生成(Function作为构造函数)
5 var fn=new Fun()
6 // 我创建了一个函数fn
7 // 这个函数由Fn生成(Fn作为构造函数)
8
9
10 console.log(fn.__proto__===Fun.prototype) //true
11 // fn的__proto__指向其构造函数Fun的prototype
12 console.log(Fun.__proto__===Function.prototype) //true
13 // Fun的__proto__指向其构造函数Function的prototype
14 console.log(Function.__proto__===Function.prototype) //true
15 // Function的__proto__指向其构造函数Function的prototype
16 // 构造函数自身是一个函数,他是被自身构造的
17 console.log(Function.prototype.__proto__===Object.prototype) //true
18 // Function.prototype的__proto__指向其构造函数Object的prototype
19 // Function.prototype是一个对象,同样是一个方法,方法是函数,所以它必须有自己的构造函数也就是Object
20 console.log(Fun.prototype.__proto__===Object.prototype) //true
21 // 与上条相同
22 // 此处可以知道一点,所有构造函数的的prototype方法的__都指向__Object.prototype(除了....Object.prototype自身)
23 console.log(Object.__proto__===Function.prototype) //true
24 // Object作为一个构造函数(是一个函数对象!!函数对象!!),所以他的__proto__指向Function.prototype
25 console.log(Object.prototype.__proto__===null) //true
26 // Object.prototype作为一切的源头,他的__proto__是null
27
28 // 下面是一个新的,额外的例子
29
30 var obj={}
31 // 创建了一个obj
32 console.log(obj.__proto__===Object.prototype) //true
33 // obj作为一个直接以字面量创建的对象,所以obj__proto__直接指向了Object.prototype,而不需要经过Function了!!
34
35 // 下面是根据原型链延伸的内容
36 // 还有一个上文并未提到的constructor, constructor在原型链中,是作为对象prototypr的一个属性存在的,它指向构造函数(由于主要讲原型链,这个就没在意、);
37
38 console.log(obj.__proto__.__proto__===null) //true
39 console.log(obj.__proto__.constructor===Object) //true
40 console.log(obj.__proto__.constructor.__proto__===Function.prototype) //true
41 console.log(obj.__proto__.constructor.__proto__.__proto__===Object.prototype) //true
42 console.log(obj.__proto__.constructor.__proto__.__proto__.__proto__===null) //true
43 console.log(obj.__proto__.constructor.__proto__.__proto__.constructor.__proto__===Function.prototype) //true
44
45
46 // 以上,有兴趣的可以一一验证  F12搞起.
         

为了方便记忆可以得出如下结论(如有错误欢迎斧正.....)

prototype是构造函数独有的属性;

对象的__prototype__属性通常与其构造函数的prototype属性相互对应;

所有构造函数的的prototype方法的__都指向__Object.prototype(除了....Object.prototype自身);

需要注意的指向是

Function的__proto__指向其构造函数Function的prototype;

Object作为一个构造函数(是一个函数对象!!函数对象!!),所以他的__proto__指向Function.prototype;

Function.prototype的__proto__指向其构造函数Object的prototype;

Object.prototype的__prototype__指向null(尽头);

在文章结构顺便附送上俩个与原型链相关的方法....欢迎使用

1.

hasOwnProperty判断一个对象是否有名称的属性或对象,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。 
如果该属性或者方法是该 对象自身定义的而不是器原型链中定义的 则返回true;否则返回false; 
格式如下: 
 
object.hasOwnProperty(proName);   
括号内必须要加引号,并且直接写入属性名
 
2.
 
isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的原型链中,是则返回true,否则返回false。 
格式如下: 
object1.isPrototypeOf(object2); 
object1是一个对象的实例; 
object2是另一个将要检查其原型链的对象。 
原型链可以用来在同一个对象类型的不同实例之间共享功能。 
如果 object2 的原型链中包含object1,那么 isPrototypeOf 方法返回 true。 
如果 object2 不是一个对象或者 object1 没有出现在 object2 中的原型链中,isPrototypeOf 方法将返回 false。 
 
 

某图在这里  ps:本文是总结,加个人理解.....图是好久前留存在电脑的....忘了是在哪看到的...

JS对象、原型

字数664 阅读10 评论0 喜欢1

Q&A:

1. OOP 指什么?有哪些特性

  • OOP,即Object Oriented Programming,面向对象编程,是计算机的一种编程架构,OOP的一条基本规则是,计算机程序由能够起到子程序作用的单个或对象组合而成。包含属性和方法的对象是类的实例,而JS中没有类的概念,而是直接使用对象实现编程任务。
  • 特性
    • 封装:能够将一个实体的信息、功能、响应都装在一个单独对象中的特性;使编程过程不必拘泥于原理,而是重在实现;
    • 继承:在不改变源程序的基础上进行扩充,原功能得以保存,并且子程序能对其进行扩展,避免编写重复代码,提高工作效率;
    • 多态:允许将子类类型的指针赋值给父类类型的指针;原生JS是弱类型语言,没有多态概念。

2. 如何通过构造函数的方式创建一个拥有属性和方法的对象?

由于函数也是对象的一种,所以继承了对象原型,可以对其添加属性和方法,构造函数也是函数,所以用自定义函数的方式,并将首字母大写以明确是构造函数即可,可以用new操作符创建函数实例验证。

function Person(name) {
this.name = name;
this.sayName = function() {
console.log(this.name);
}
}

构造函数

3. prototype 是什么?有什么特性

  • prototype,即原型,每创建一个函数都会有一个prototype属性,这个属性是一个指针,指向一个对象,这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。
  • 特性:让所有对象实例共享原型对象所包含的属性和方法:

    function Person(name) {
    this.name = name;
    }
    Person.prototype.sayName = function() {
    console.log(this.name);
    }
    var p1 = new Person('zhao'),
    p2 = new Person('kevin'); p1.sayName();
    p2.sayName();

    prototype

4. 画出如下代码的原型图

    <script>
function People(name) {
this.name = name;
this.sayName = function() {
console.log('my name is:' + this.name);
}
} People.prototype.walk = function() {
console.log(this.name + 'is walking');
} var p1 = new People('饥人谷');
var p2 = new People('前端');
</script>

原型图

5. 以下代码中的变量age有什么区别

      function People() {
var age = 1;
this.age = 10;
}
People.age = 20; People.prototype.age = 30;
  • var age = 1:age为局部变量;
  • this.age = 10:函数调用时,age为this指向对象的属性;
  • People.age = 20:构造函数的age变为20;
  • People.prototype.age = 30:原型添加age属性;

Coding:

1. 创建一个 Car 对象,拥有属性name、color、status;拥有方法run,stop,getStatus

function Car(name, color, status) {
this.name = name;
this.color = color;
this.status = status;
}
Car.prototype = {
constructor : Car,
run: function() {
this.status = 'run';
},
stop: function() {
this.status = 'stop';
},
getStatus: function() {
console.log(this.status);
}
} var car1 = new Car('BMW', 'red', 'stop');

coding1

本文归本人和饥人谷所有,如需转载请注明出处

JS中原型链中的prototype与_proto_的个人理解与详细总结(**************************************************************)的更多相关文章

  1. JS原型链中的prototype与_proto_的个人理解与详细总结

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  2. 关于JS中原型链中的prototype与_proto_的个人理解与详细总结

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  3. JS中原型链中的prototype与_proto_的个人理解与详细总结

    1.对象的内部属性[[prototype]]和属性__proto__:每个对象都具有一个名为__proto__的属性: 2.函数的属性prototype:每个构造函数(构造函数标准为大写开头,如Fun ...

  4. js delete删除对象属性,delete删除不了变量及原型链中的变量

    js delete删除对象属性,delete删除不了变量及原型链中的变量 一.delete删除对象属性 function fun(){ this.name = 'gg'; } var obj = ne ...

  5. javascript中原型链存在的问题

    我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子. function A () { this.abc = 44; } A.prototype.getAbc = function ...

  6. JavaScript中原型链存在的问题解析

    我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子. function A () { this.abc = 44; } A.prototype.getAbc = function ...

  7. javascript原型链中 this 的指向

    为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = { d: 40 }; var a = { x: 10, calculate: function (z) ...

  8. js的原型链

    js中的原型链是一个很重要的概念,理解了原型链,对js程序的开发有很大的好处,废话不说,先上图: javascript是基于原型的语言,所以一个对象可以另一个对象继承.不过javascript实现的时 ...

  9. 前端基本知识(二):JS的原型链的理解

    之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...

随机推荐

  1. 【HIHOCODER 1182】欧拉路·三

    描述 小Hi和小Ho破解了一道又一道难题,终于来到了最后一关.只要打开眼前的宝箱就可以通关这个游戏了. 宝箱被一种奇怪的机关锁住: 这个机关是一个圆环,一共有2^N个区域,每个区域都可以改变颜色,在黑 ...

  2. HDU - 1465 不容易系列之一(错排)

    HDU有个网名叫做8006的男性同学,结交网友无数,最近该同学玩起了浪漫,同时给n个网友每人写了一封信,这都没什么,要命的是,他竟然把所有的信都装错了信封!注意了,是全部装错哟! 现在的问题是:请大家 ...

  3. 建立,查询二叉树 hdu 5444

    Elven Postman Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  4. hiho 1050 树的直径

    #1050 : 树中的最长路 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上回说到,小Ho得到了一棵二叉树玩具,这个玩具是由小球和木棍连接起来的,而在拆拼它的过程中, ...

  5. jenkins匿名用户登录 - 安全设置

    最近自己安装配置jenkins,但是跑任务时,发现是匿名账户登录,且提示: 后来发现搭建好jenkins之后,默认就是匿名用户登录的,可以在安装设置菜单里进行账户管理. 1.登录Jenkins服务器, ...

  6. (转)全网最!详!细!tarjan算法讲解

    byhttp://www.cnblogs.com/uncle-lu/p/5876729.html 全网最详细tarjan算法讲解,我不敢说别的.反正其他tarjan算法讲解,我看了半天才看懂.我写的这 ...

  7. 让读者快速了解RocketMQ消息中间件需要解决哪些问题

    本文首先引出消息中间件通常需要解决哪些问题,在解决这些问题当中会遇到什么困难,Apache RocketMQ作为阿里开源的一款高性能.高吞吐量的分布式消息中间件否可以解决,规范中如何定义这些问题.然后 ...

  8. 机器学习实战之AdaBoost算法

    一,引言 前面几章的介绍了几种分类算法,当然各有优缺.如果将这些不同的分类器组合起来,就构成了我们今天要介绍的集成方法或者说元算法.集成方法有多种形式:可以使多种算法的集成,也可以是一种算法在不同设置 ...

  9. hdoj--1016<dfs>

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1016 题目描述:1-n的整数排成一个环,首尾相连,相邻的两个数相加是素数,输出满足的排列,1开头输出, ...

  10. localStorage的用法

    1.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,前者是一直存在本地的,后者是伴随着session,窗口一旦关闭就消失了.二者用法完全相 ...