js中只有对象,包括对象,函数,常量等。

prototype

  • 只有函数里有这个属性。
  • 对象里可以设置这个属性,但是没这个属性的意义
  • prototype指向一个对象,可以添加想要的方法。
  • 该对象里有一个constructor属性,默认指向了这个函数。

proto

  • 对象里有这个属性。
  • 功能: 如果要一个对象的属性,会先在这个对象里查找,如果这个对象里没有这个属性,则会在这个对象里__proto__的对象里查找这个属性
  • 如果这个对象本身还有一个 proto 属性,则会继续在__proto__.__proto__ 里找这个属性。
  • 该属性无法在ie11以下,无法直接访问

new 对象

  • new function 创建对象的时候,会首先创建一个空对象
  • 传入这个fuction赋值给this对象
  • 把该function里的prototype 赋值给这个对象的 __proto__属性。
  • 所创建出来的对象,这是为什么创建出来的对象可以访问之前function里prototype设置属性

一些实例

  • proto

    var a = {};
    a.__proto__ = {
    "show":function(){
    document.write("show");
    }
    }
    a.show()//show
  • function 里

    function B(){
    
    }
    B.prototype.show1 = function(){
    document.write("B:show1");
    }
    B.show = function(){
    document.write("B:show");
    }
    new B().show1();// 对象只与方法里prototype 关联
    new B().show();//B对象里直接设置的方法不会关联到方法里。
  • 方法调用以及this理解

    • this 其实就是调用方法 . 之前的对象。
    • 如果使用call,apply方式调用,则this是用第一个参数赋的值。
    function B(){
    
    }
    B.show = function(){
    document.write(this);
    } B.show();//打印结果为: function B

基础的东西都说完了,咱们来基于这些做一些拓展

继承封装

  • 方式1

    ext = function(child,parent)
    {
    var _proto = function(){};
    _proto.prototype = parent.prototype;
    child.prototype = new _proto();
    child.prototype.constuctor = child;
    child.super=parent;
    }
    Object.prototype.super = function(){};
  • 方式2

    ext = function(child,parent)
    {
    child.prototype.__proto__ = parent.prototype;//new _proto();
    child.prototype.constuctor = child;
    child.super=parent;
    }
    Object.prototype.super = function(){};
  • 使用

    //定义Person
    function Person(name, age)
    {
    this.name = name;
    this.age = age;
    } Person.prototype.speak = function()
    {
    document.write("name = "+this.name + "<br/>");
    } //定义学生,继承了Person
    function Student(name,age)
    {
    Student.super.call(this,name,age);
    this.score = 90;
    }
    ext(Student,Person) Student.prototype.show = function()
    {
    document.write("show name=" + this.name + ",score = "+this.score +"<br/>");
    } //定义Academician 继承Student
    function Academician(name, age){
    Academician.super.call(this,name,age);
    }
    ext(Academician,Student); var academ = new Academician("狗蛋",20); academ.show();
    academ.speak();
  • 打印结果

    show name=狗蛋,score = 90
    name = 狗蛋

[js学习笔记] 原型链理解的更多相关文章

  1. 【学习笔记】深入理解js原型和闭包系列学习笔记——精华

    深入理解js原型和闭包笔记: 1.“一切皆是对象”,对象是属性的集合. 丨 函数也是对象,但是使用typeof时为什么函数返回function而 丨  不是object呢,js为何要对函数做这样的区分 ...

  2. js原型链理解(2)--原型链继承

    1.原型链继承 2.constructor stealing(构造借用) 3.组合继承 js中的原型链继承,运用的js原型链中的__proto__. function Super(){ this.se ...

  3. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  4. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  5. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  6. 一点感悟:《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

  7. 【转】Backbone.js学习笔记(二)细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  8. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

随机推荐

  1. Integer陷阱(0~127和其他 数值相等对象比较)

    Integer 类在对象中包装了一个基本类型 int 的值. 有一个陷阱存在,经常出现在面试题中,情况如下面代码 public class IntegerDemo { public static vo ...

  2. Myeclipse详细使用教程

    Myeclipse详细使用教程.. /*+Shift+Enter(生成多行注释) /**+Shift+Enter(生成文档注释)-----------------问题:在编辑jsp的时候,如果光标移动 ...

  3. @media实现网页自适应中的几个关键分辨率

    不同分辨率设备或不同窗口大小下网页布局经常是不同的,一不小心就会发生错位.可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题.到底分辨率是多少的时候设置呢?首先 ...

  4. 不安装vc2015 Redistributable解决api-ms-win-crt-runtime-l1-1-0.dll丢失错误

    一.背景 最近用到python下的cx_Oracle模块,开发环境中测试正常,用cx_freeze打包后,到用户机器上一部署,各种奇奇怪怪的问题频出,运行环境如下: a.开发环境:64位win10操作 ...

  5. .NET Core 在程序集中集成Razor视图

    前言 有时候,我们在开发一个程序集供其他项目引用的时候,可能需要对外输出一些HTML的结构数据. 还有一些情况我们可能开发的是一个中间件,这个中间件需要提供一些界面来对外展示数据或者是内部的一些程序的 ...

  6. Maven详解(七)------ 创建Web工程以及插件原理

    1.什么是 Maven 插件? 上一篇博客我们将了 Maven 的生命周期,我们知道 Maven 的核心是生命周期,生命周期指定了 Maven 命令执行的流程顺序.但是真正实现流程的工程是由插件来完成 ...

  7. C / C++ 运行环境搭建教程

    C / C++ 运行环境搭建教程 一.实验环境 本机操作系统:Windows 7 64位 虚拟机:VMware Workstation 12 pro 虚拟机操作系统:Linux CentOS 7 二. ...

  8. 早期MyBatis开发与接口式Mybatis开发的简介

    早期MyBatis开发与接口式Mybatis开发的简介 一.早期版本的myBatis使用 导jar包            1.配置mybatis.xml的配置文件                1) ...

  9. [2013-01-15]The Little Schemer 学习笔记

    <The Little Schemer> FP编程.lisp入门必备 这书貌似没中文版: 有英文pdf版:完整版下载链接 英文不好的,被前几页噎住的,可以先到这里看翻译好的前言部分 看完人 ...

  10. css 找到隐藏元素个数

    <form>   <input type="hidden" name="email" />   <input type=" ...