原型

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. MFC 模块状态的实现

    本技术备忘录介绍MFC “模块状态”结构的实现.充分理解模块状态这个概念对于在DLL中使用MFC的共享动态库是十分重要的. MFC的状态信息分为三种:全局模块状态数据.进程局部状态数据和线程局部状态数 ...

  2. 20140919 进程间通信 系统栈 用户栈 多级反馈队列 windows 内存管理

    1.进程间通信 共享内存(剪切板) 匿名管道只能实现父子进程间的通信(以文件系统为基础): 匿名管道是什么,有什么用,怎么用 1.创建父进程,也就是在解决方案中建立一个parent的工程 2.在par ...

  3. mac 密码重置

    首先请开机或重新启动系统,在电脑刚启动时,请按下键盘上的 command+S 组合键不动, 接下来会在屏幕上看到一串串的命令字符显示,当进入安全模式以后,会看到 一个 root 开始的命令行输入端口. ...

  4. Excel_PoweQuery——条件计数、条件求和

    岁月不居,时节如流. 时光荏苒,岁月如梭. 前面两段充分体现了博主深厚的文学素养,别和博主争,博主说啥就是啥. 其实,对于大量数据的处理,这几年微软Office做的不单单是2007的时候把Excel的 ...

  5. Nginx+Keepalived高可用集群应用实践

    Nginx+Keepalived高可用集群应用实践 1.Keepalived高可用软件 1.1 Keepalived服务的三个重要功能 1.1.1管理LVS负载均衡软件 早期的LVS软件,需要通过命令 ...

  6. 界面设计微信小程序

    上一个周期将微信小程序的程序编完了,虽然还有很多需要修改的地方,大体已经完成.剩下的边角料以后再弄 这个周期来学习一下微信小程序的设计....好吧. 首先还是需要看一下微信的设计指南的.地址 http ...

  7. 设置overflow:auto无效的解决办法

    做项目中经常要用到滚动条,有时候给div设置overflow无效. 遇到这样的问题,只需要在 F12 Elements面板检查一下要设置overflow的元素的宽高是否大于父级元素宽高. (overf ...

  8. 基于SpringBoot的花里胡哨配置

    花里胡哨的配置 记录一下流行框架的一些常用配置 lomback配置文件 <?xml version="1.0" encoding="UTF-8"?> ...

  9. PHP FILTER_VALIDATE_BOOLEAN 过滤器

    定义和用法 FILTER_VALIDATE_BOOLEAN 过滤器把值作为布尔选项来验证. Name: "boolean" ID-number: 258 可能的返回值: 如果是 & ...

  10. Hdu-4757 Tree(可持久化字典树+lca)

    题目链接:点这 我的github地址:点这     Problem Description   Zero and One are good friends who always have fun wi ...