一、原型和原型对象

  1. 函数的原型prototype:函数才有prototype,prototype是一个对象,指向了当前构造函数的引用地址。

  2. 所有对象都有__proto__属性, 所有的__proto 指向改对象的原型对象(注意:proto前面是两个

关系示意图:

虚线代表:指针
实线:prototype原型对象

实例

    function A() {this.a = 1;}var a = new A();var obj = {};console.log(a.constructor == A); //实例中无constructor属性,在原型中存在,因为指针链接到a.__proto,输出原型的constructor属性Aconsole.log(a.__proto__ === A.prototype);  //ture 实例的__proto__指向构造函数的原型prototypeconsole.log(A.__proto__ === Function.prototype);//true 构造函数的__proto__指向 Function的原型prototypeconsole.log(A.prototype.constructor === A); //true 构造函数原型prototype的constructor属性,指向构造函数console.log(A.prototype.__proto__ === Object.prototype); //所有的prototype都是Object的实例console.log(Object.prototype.__proto__ === null); //Object.prototype.__proto__ 是原型链的唯一出口console.log(typeof null); //"object"  null是一个空对象指针

二、原型的创建方式

2.1 单独添加属性方法

function Person(){}Person.prototype.name = "Nicholas";Person.prototype.age = 29;Person.prototype.job = "Software Engineer";Person.prototype.sayName = function(){console.log(this.name);};var person1 = new Person();person1.sayName(); //"Nicholas"var person2 = new Person();person2.sayName(); //"Nicholas"//true  访问的都是构造函数原型prototype的方法console.log(person1.sayName == person2.sayName); 

2.2 对象字面量方法

 a. 采用{}方式

    function Person(name, age, job) {this.name = name;this.age = age;this.job = job;this.friends = ["Shelby", "Court"]; //引用类型属性放在构造函数中}Person.prototype = {constructor: Person,sayName: function () {alert(this.name);}};var person1 = new Person("Nicholas", 29, "Software Engineer");var person2 = new Person("Greg", 27, "Doctor");person1.friends.push("Van");alert(person1.friends); //"Shelby,Court,Van"  alert(person2.friends); //"Shelby,Court" alert(person1.friends === person2.friends); //falsealert(person1.sayName === person2.sayName); //true

 b. 构造函数和原型结合
  构造函数定义属性,原型模式定义方法和共享的属性

 function Person(name, age, job){this.name = name;this.age = age;this.job = job;this.friends = ["Shelby", "Court"];  //引用类型属性放在构造函数中}Person.prototype = {constructor: Person,sayName : function () {alert(this.name);}};var person1 = new Person("Nicholas", 29, "Software Engineer");var person2 = new Person("Greg", 27, "Doctor");person1.friends.push("Van");alert(person1.friends); //"Shelby,Court,Van"  alert(person2.friends); //"Shelby,Court" alert(person1.friends === person2.friends); //falsealert(person1.sayName === person2.sayName); //true

2.3 class类

    class A {constructor(name) {//构造函数this.name = name; //给新的对象添加一个name属性}// sayName相当于 A.prototype.sayName = function(){return this.name}sayName() {return this.name;}}var a = new A('zhangsan');console.log(a);

三、 原型对象属性为引用类型

    function Person() {}Person.prototype = {constructor: Person,name: "Nicholas",age: 29,job: "Software Engineer",friends: ["Shelby", "Court"],sayName: function () {console.log(this.name);}};var person1 = new Person();var person2 = new Person();person1.friends.push("Van");console.log(person1.friends); //"Shelby,Court,Van"console.log(person2.friends); //"Shelby,Court,Van"console.log(person1.friends === person2.friends); //true

转载于:https://www.cnblogs.com/hjson/p/10224191.html

js面向对象2--原型相关推荐

  1. JS 面向对象与原型

    创建对象 创建一个对象,然后给这个对象新建属性和方法. var box = new Object(); //创建一个 Object 对象 box.name = 'Lee'; //创建一个 name 属 ...

  2. 简单粗暴地理解js原型链–js面向对象编程

    简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...

  3. JS 面向对象编程、原型链、原型继承(个人学习总结)

    一.面向对象 1. 面向对象 是所有语言 都有的一种编程思想,组织代码的一种形式 基于对象的语言:JS语言 面向对象的语言:c++ java c# 2. 面向对象 3大特征 封装:将重用代码封装到函数 ...

  4. JS题目总结:原型链/new/json/MVC/Promise

    JS题目总结:原型链/new/json/MVC/Promise 1原型链相关 解读: 上图中,Object,Function,Array,Boolean都是构造函数 第一个框: object是实例对象 ...

  5. js面向对象程序设置——创建对象

    <script type="text/javascript">              //工厂方式         //1.原始方式         /* var ...

  6. 对js面向对象的理解

    转自:http://www.cnblogs.com/jingwhale/p/4678656.html js面向对象理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP ...

  7. 深入浅出面向对象和原型【番外篇——重新认识new】

    前言 我们在深入浅出面向对象和原型[概念篇2]在这篇文章中了解到了如何使用new Function解决重复创建浪费内存的问题,其中的关键就是new,那么这篇文章让我们来重新了解new的前世今生 一个苦 ...

  8. JS面向对象的程序设计之继承-继承的实现-借用构造函数

    JS面向对象的程序设计之继承-继承的实现-借用构造函数 前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方翻译的差强人意,所以用自己所理解的,尝试解读下.如有纰漏或错误 ...

  9. js面向对象与PHP面向对象总结

    js面向对象: 1.什么是对象? 对象:任何实体都是对象,拥有属性和方法两大特征 属性:描述事物的特点: 方法:实物拥有的行为: 2.在JS里 Person.name="zhang" ...

  10. 【笔记】JavaScript高级篇——面向对象、原型、继承

    原文链接:http://www.hansmkiii.com/2018/07/06/javascript-node-1/ " 面向对象.原型.继承 " 1.面向对象 1.1 什么是面 ...

最新文章

  1. 对F-score的理解
  2. Jetpack:使用 ActivityResult 处理 Activity 之间的数据通信
  3. 【2018.4.14】模拟赛之一-ssl2391 数列
  4. 桥梁在线计算机监测系统,桥梁在线监测系统
  5. 推出云游戏解决方案后,腾讯在这场沙龙上还说了什么?
  6. java开发原则_java开发中,大家处理异常的原则是什么,是如何处理的?
  7. XBMC不能看搜狐电视剧
  8. 【Python笔记】使用 re 模块实现正则表达式操作
  9. 前端安全 XSS跨站脚本攻击-CSRF跨站请求伪造攻击
  10. 机械工程matlab课程设计,浅论MATLAB在机械课程设计中的应用方法和技巧
  11. 联想android刷机教程,联想YOGA Tablet 2线刷刷机教程 Android版可救砖
  12. HDOJ 5773 The All-purpose Zero
  13. java kafka设置偏移量_kafka实战宝典:手动修改消费偏移量的两种方式
  14. 今天, IG 帮我们圆梦
  15. 喜讯 | 人大金仓荣获行业信息化领航企业奖
  16. 一维区间上高斯数值积分的MATLAB实现
  17. 【哲学问题】-《哲学家们都干了些什么?》
  18. attach和detach区别
  19. ABAP中的CHECK,EXIT,RETURN,LEAVE PROGRAM.
  20. arduino开发板包及相关依赖包的下载、升级

热门文章

  1. BDKRHash详解
  2. JavaScript重载解读
  3. powerdesigner12.5入门教程
  4. 【转载】:单例设计模式
  5. VS2010与Windows7共舞:对库进行编程
  6. Spring Bean的生命周期例子
  7. Leetcode-204 Count Primes
  8. Delphi 设计模式:《HeadFirst设计模式》Delphi7代码---模板方法模式之CoffeineBeverageWithHook[转]...
  9. java枚举类型转换为Struts2的select的数据
  10. 度微尔开发者联盟网站