<!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

 </head>

 <body>

   <script>

     /**

       1.什么是原型

       1-1：构造函数的prototype属性就是原型

       1-2：只有构造函数才有prototype属性

       1-3：构造函数一旦被创建，js引擎就帮我们自动创建好了prototype属性

       1-4：prototype属性的值就是一个对象，主要作用就是用来共享数据

     */

     /**

       2.原型的使用原则

       2-1：将公用的属性或者方法放在原型上（如果直接放在构造函数上会比较占用内存，浪费资源）

       2-2：由构造函数创建出来的对象，会默认链接到它的原型上，也就是构造函数的prototype属性上

     */

     // ex

     var demoObj = function (obj) {

       this.name = obj.name

     }

     console.log(demoObj.prototype, typeof demoObj.prototype) // prototype属性的值是一个对象

     // 尝试给构造函数的prototype属性添加属性

     demoObj.prototype.siHi = function () {

       console.log(`哈哈`)

     }

     // 实例化对象

     var newObj = new demoObj({

       name: 'ethans'

     })

     // 我们发现实例化的对象直接可访问到构造函数的prototype属性上（这里有一个属性搜索原则的问题（即先去构造函数中查看，如果没有就会上他的原型中去找））

     newObj.siHi()

     /**

       3.非标准属性__proto__

       3-1: 实例化出来的对象都有一个__proto__属性

       3-2：这个属于是非标准的，是浏览器提供的

       3-3：对象的__proto__和构造函数的prototype指向同一个对象

     */

     console.log(newObj.__proto__ === demoObj.prototype) // true

     /**

       4.prototype和__proto__的区别于联系

       4-1：实例对象具有__proto__属性

       4-2：构造函数具有prototype属性

       4-3：实例对象的__protp__属性和构造函数的prototype属性指向同一个对象即：newObj.__proto__ === demoObj.prototype

       4-4: __proto__是一个非标准属性，不要再实际项目中使用，可以再开发阶段用来查看的对象的原型是哪一个

     */

     /**

       5.constructor

       5-1: 只要是构造函数就会有一个prototype属性；

       5-2：默认情况下prototype中会有一个constructor属性；

       5-3：prototype中的constructor属性又指向了当前的构造函数

     */

      console.log(demoObj.prototype.constructor === demoObj) // true

   </script>

 </body>

 </html>

6.prototype和__proto__和constructor三者的关系图

7.属性搜索原则

7.1 先会在对象本身查找，如果找到了该属性，就直接返回
7.2 如果没有找到就会到 原型对象 中查找属性，如果找到了就会返回
7.3 如果在原型中没有找到该属性，会会到 原型对象 的 原型对象 中查找
7.4 直到搜索到 Object.prototype ，如果找到了，就直接返回， 如果还没有找到，就会返回undefined
  var Person = function(){}
        var p = new Person();
        // 给构造函数的原型添加属性
        // Person.prototype.name = '小明';
        // 给构造函数的原型的原型对象添加属性
        // Person.prototype.__proto__.name = '小明';
        // 构造函数的原型的原型对象其实质就是Object.prototype
        console.log(Person.prototype.__proto__===Object.prototype);//=>true
        Object.prototype.name='小明';
        console.log(p.name);
// 属性搜索原则，
// 先去构造函数中去找，如果找到了就直接返回，如果没有
// 再去构造函数的原型中去找，如果找到了，就直接返回，如果没有
// 再去构造函数的原型的原型对象中去找，找到了就返回，如果没有
// 再去原型对象的原型对象的原型对象中去找，如果找到了就直接返回，如果还没有就返回undefined
// 翻译成代码就是，Person.prototype=>Person.prototype.__proto__(Object.prototype)=>null
 
8.查找toString的过程
  function Person() {

  }

  var p1 = new Person();

  // 查找toString方法的过程：

  // 1 在 p1 中找

  // 2 在 Person.prototype 中查找

  // 3 在 Person.prototype 的原型中查找

  p1.toString();

  console.log(p1.__proto__)

  console.log(p1.__proto__.__proto__)

  console.log(p1.__proto__.__proto__.__proto__)

  console.log('toString' in p1.__proto__);//true
 
9.面向对象的三大特征
 
封装
     将复杂的代码逻辑进行封装，将简单的调用暴露出来
     使用函数进行封装；
     函数是对一段代码逻辑的封装
     目的：是为了对一段代码逻辑进行复用
     对象：无序键值对的集合
          对象是对数据（属性）和行为（方法的）封装
继承
     子类会从父类中继承属性和方法，这样子类就可以使用父类中的方法和属性
多态
 

2.js原型的基本概念的更多相关文章

  1. 深入分析JS原型链以及为什么不能在原型链上使用对象

    在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype:如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条).以下将会围绕 ...

  2. JS 原型链

    之前对JS的prototype知识比较模糊,今天理清了记下来,以防忘记,直切正题: 1.要明白原型链,就必须先清楚JS的构造函数模式: js是面向对象的语言,既然是面型对象,就一定会有一个对象的模板, ...

  3. js原型

    1.js基本类型和对象类型 js的简单类型包括数字(其中NaN为数字类型).字符串(类似'A'为字符,js没字符类型).布尔值.null值和undefined值.其他所有的值都是对象.数字.字符串和布 ...

  4. JS 原型链图形详解

    JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...

  5. js原型解析

    我们都知道javascript因为具有了继承以及变量等等一系列的特性之后才被人们认为具有一门编程语言的资格,在后续的不断发展中,js在原生的基础上扩展了基于jquery等等的库,甚至衍生了像node. ...

  6. JS原型的剖析与理解

    原型相关的概念 关于面向对象的概念 类 class 在js中就是构造函数 在传统的面向对象语言中,使用一个叫类的东西定义模版,然后使用模版创建对象 在构造方法中也具有类似的功能,因此称其为类 实例与对 ...

  7. 理解JS原型和原型链

    本文通过对<JavaScript高级程序设计>第六章的理解,加上自己的理解,重组了部分内容,形成下面的文字. 理解了原型这个概念,你的JS世界会清明很多. 为什么要为JS创造原型这个概念 ...

  8. js原型和原型链理解到面向对象

    一.js中的两种对象,普通对象和函数对象 var obj1 = {}; var obj2 =new Object(); var obj3 = new obj1(); function fun1(){} ...

  9. 37.js----浅谈js原型的理解

    浅谈Js原型的理解 一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了!    在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象    语言的小白来说,有理解不了里面 ...

随机推荐

  1. Window 无法启动此程序，因为计算机中丢失api-ms-win-crt-runtime-l1-1-0.dll。尝试重新安装该程序以解决此问题。

    现象: 解决办法: 方法一:缺什么补什么 http://www.greenxf.com/soft/125654.html 把api-ms-win-crt-runtime-l1-1-0.dll下载到电脑 ...

  2. ZOJ2107 Quoit Design 最近点对

    ZOJ2107 给定10^5个点,求距离最近的点对的距离. O(n^2)的算法是显而易见的. 可以通过分治优化到O(nlogn) 代码很简单 #include<iostream> #inc ...

  3. [odb-users] query results not being cached?

    Burton, Craig crburton at tnsi.comWed Jun 6 13:58:03 EDT 2012 Previous message: [odb-users] query re ...

  4. 源码阅读之LinkedList（JDK8）

    inkedList概述 LinkedList是List和Deque接口的双向链表的实现.实现了所有可选列表操作,并允许包括null值. LinkedList既然是通过双向链表去实现的,那么它可以被当作 ...

  5. 1.2Hello, World!的大小

    描述 还记得在上一章里,我们曾经输出过的“Hello, World!”吗? 它虽然不是本章所涉及的基本数据类型的数据,但我们同样可以用sizeof函数获得它所占用的空间大小. 请编程求出它的大小,看看 ...

  6. AppConfig 操作简易封装

    using System; using System.Configuration; namespace HT.IMS.Common { public class ClientConfig { ; pu ...

  7. C#模拟百度登录并到指定网站评论回帖（三）

    上次说到怎么获取BAIDUID,这个相信很多人都能够拿到就不多说了,今天一连说两个,获取token和raskey 2.利用以上获得的cookie直接访问页面 https://passport.baid ...

  8. CF817C Really Big Numbers

    思路: 二分. 实现: #include <iostream> #include <cstdio> using namespace std; typedef long long ...

  9. 继续C#开发or转做产品

    本人今年大四,C#开发,在一家公司实习了一年后,面临一个选择,是继续C#开发还是转做产品?我C#开发能力目前还一般,但很有兴趣.也喜欢设计与创意,做过产品专员.求大婶们指导!

  10. 后台接收不到postman发送的xml参数的解决办法

    首先在body下复制需要传的xml: 然后点击url右边的Params,添加key和value.value和body下的xml是一样的: 最后点击send,后台就能接收到参数了.