原型

const yoshi = { skulk: true };
const hattori = { sneak: true };
const kuma = { creep: true }; ⇽--- 创建3个带有属性的对象
assert("skulk" in yoshi, "Yoshi can skulk");
assert(!("sneak" in yoshi)), "Yoshi cannot sneak");
assert(!("creep" in yoshi)), "Yoshi cannot creep"); ⇽--- yoshi对象只能访问自身的属性skulk
Object.setPrototypeOf(yoshi, hattori); ⇽--- Object. setProto-typeOf方法, 将对象hattori设置为yoshi对象的原型
assert("sneak" in yoshi, "Yoshi can now sneak"); ⇽--- 通过将hattori对象设置为yoshi对象的原型, 现在yoshi可以访问hattori对象的属性
assert(!("creep" in hattori)), "Hattori cannot creep"); ⇽--- 目前hattori对象还不具有属性creep
Object.setPrototypeOf(hattori, kuma); ⇽--- 将kuma对象设置为hattori对象的原型
assert("creep" in hattori, "Hattori can now creep"); ⇽--- 现在hattori对象可以访问属性creep
assert("creep" in yoshi, "Yoshi can also creep"); ⇽--- 通过将hattori对象设置为yoshi对象的原型, 现在yoshi对象也可以访问属性creep

对象构造器与原型

function Ninja(){} ⇽--- 定义一个空函数, 什么也不做, 也没有返回值
Ninja.prototype.swingSword = function(){
return true;
}; ⇽--- 每个函数都具有内置的原型对象, 我们可以对其自由更改
const ninja1 = Ninja();
assert(ninja1 === undefined , "No instance of Ninja created."); ⇽--- 作为函数调用Ninja, 验证该函数没有任何返回值
const ninja2 = new Ninja();
assert(ninja2 && ninja2.swingSword && ninja2.swingSword(),"Instance exists and method is callable." ); ⇽--- 作为构造函数调用Ninja, 验证不仅创建了新的实例, 并且该实例具有原型上的方法

每个函数都有一个原型对象, 该原型对象将被自动设置为通过该函数创建对象的原型。

关于实例属性与原型属性

function Ninja(){
this.swung = false; ⇽--- 创建布尔类型的实例变量, 并初始化该变量的默认值为false
this.swingSword = function(){
return !this.swung; ⇽--- 创建实例方法, 该方法的返回值为实例变量swung取反
};
Ninja.prototype.swingSword = function(){
return this.swung;
}; ⇽--- 定义一个与实例方法同名的原型方法, 将会优先使用哪一个呢
const ninja = new Ninja();
assert(ninja.swingSword(),"Called the instance method, not the prototype met};

通过原型一切都可以在运行时进行修改

function Ninja(){
this.swung = true;
} ⇽--- 定义了一个构造函数, 该构造函数中创建了一个swung属性, 初始化为布尔值
const ninja1 = new Ninja(); ⇽--- 通过new操作符调用构造函数, 创建实例Ninja
Ninja.prototype.swingSword = function(){
return this.swung;
}; ⇽--- 在实例对象创建完成之后, 在原型上添加一个方法
assert(ninja1.swingSword(), "Method exists, even out of order."); ⇽--- 验证该方法存在于对象中
Ninja.prototype = {
pierce: function() {
return true;
}
} ⇽--- 使用字面量对象完全重写Ninja的原型对象, 仅有一个pierce方法
assert(ninja1.swingSword(),"Our ninja can still swing!"); ⇽--- 尽管我们已经完全替换了Ninja的构造器原型, 但是实例化后的Ninja对象仍然具有swingSword方法, 因为对象ninja1仍然保持着对旧的Ninja原型的引用
const ninja2 = new Ninja();
assert(ninja2.pierce(),"Newly created ninjas can pierce");
assert(!ninja2.swingSword, "But they cannot swing!"); ⇽--- 新创建的ninja2实例拥有新原型的引用, 因此不具有swingSword方法, 仅具有pierce方法

JS的面向对象与原型的更多相关文章

  1. JS面向对象之原型

    面向对象之原型 为什么要使用原型 由于 js 是解释执行的语言, 那么在代码中出现的函数与对象, 如果重复执行, 那么会创建多个副本, 消耗更多的内存, 从而降低性能 传统构造函数的问题 functi ...

  2. 第一百零九节,JavaScript面向对象与原型

    JavaScript面向对象与原型 学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标 ...

  3. JavaScript--我发现,原来你是这样的JS:面向对象编程OOP[2]--(创建你的那个对象吧)

    一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...

  4. JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)

    一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...

  5. JS--我发现,原来你是这样的JS:面向对象编程OOP[2]--(创建你的那个对象吧)

    一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...

  6. 面向对象之原型——challenge

    面向对象之原型 object-oriented面向对象的设计,不同于其他语言,js中的面向对象没有类的概念,因此,其对象也有些特殊. 所谓对象就是无序属性的集合,其属性可以包含基本值.对象.函数.也就 ...

  7. JavaScript(第十四天)【面向对象和原型】

    学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建 ...

  8. JavaScript基础笔记(四) JS式面向对象

    JS式面向对象 一.理解对象 一)属性类型 ECMA-262 第 5 版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征. ECMA-262 定义这些特性是为 ...

  9. 学JS的心路历程-JS支持面向对象?(一)

    昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特 ...

随机推荐

  1. innobackupex2.4选项参考

    该innobackupex2.4选项参考¶ 此页面记录了innobackupex的所有命令行选项. 选项 --apply-log BACKUP-DIR通过应用xtrabackup_logfile位于同 ...

  2. 【目录】循序渐进学.Net Core Web Api开发系列

    当前标签: 循序渐进学.Net Core Web Api开发系列   循序渐进学.Net Core Web Api开发系列[16]:应用安全续-加密与解密 NET未来之路 2019-03-13 15: ...

  3. python之字符串中插入变量

    方法一:也是 比较好用的,功能教齐全 s="{name} is {sex}" print(s.format(name="zzy",sex="girl& ...

  4. scss定义全局变量引入sass-resources-loader报错

    开发jquery多页应用,引入sass-resources-loader后报 Make sure 'options.resources' is String or Array of Strings. ...

  5. centos6.5大于2T容量硬盘分区、格式化、挂载!

    一.  超过2T容量硬盘使用parted创建分区 1.fdisk l(查看需要分区的硬盘盘符如:sda) 2.parted /dev/sda 3.rm 1 4.mklabel gpt(超过2T磁盘格式 ...

  6. shell script 二 判断符号【】 shift 偏移量 if then fi

    判断符号[]类似于test.但是[]有通配符及正则表达式,为了区分,利用[]来做判断时,前后都需要加空格来区分.又一个坑 [ -z "$HOME" ];echo $? 例: 1 r ...

  7. vector 有点麻烦啊 能简单点么?

    #include <iostream> #include <cstdlib> #include <cstring> #include <cstdio> ...

  8. position: absolute 如果不设置left, right, top, bottom会在什么位置

    一般我们设置position: absolute都会一起设置left/right/top/bottom, 但是如果不设置, 布局会是什么样子的呢? 直接上图 1.一个大盒子中4个小盒子, 正常文档流布 ...

  9. rest framework 之前

    在开始rest framework之前,我们先来了解一下什么是restful rest 是一种软件架构风格,Representational state Transfer 它从资源的角度去看整个网络, ...

  10. 理解 Java 序列化

    一.什么是序列化 序列化是一种对象持久化的手段.类通过实现 java.io.Serializable 接口以启用其序列化功能. 序列化:把对象转换为字节序列的过程. 反序列化:把字节序列恢复为对象的过 ...