原型

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. scp指定端口 从远程机器复制目录到本机器目录

    scp -P 22622 -r root@192.168.70.63:/root/iNmon ./ -P port  注意是大写的P, port是指定数据传输用到的端口 root@192.168.70 ...

  2. Spring Cloud注册中心高可用搭建

    Spring Cloud的注册中心可以由Eureka.Consul.Zookeeper.ETCD等来实现,这里推荐使用Spring Cloud Eureka来实现注册中心,它基于Netfilix的Eu ...

  3. 数据概览神器pandas_profiling

    安装: pip install pandas_profiling 用法如下: import pandas as pd import pandas_profiling df = pd.read_exce ...

  4. PHP 工厂模式浅析

    //抽象出一个人的接口interface Person{ public function showInfo();}//继承于人的学生类class Student implements Person{ ...

  5. 从URL输入到页面展现,过程中发生了什么?

    从在地址栏中输入了URL,到浏览器展现出页面整个过程中,大概经历了如下过程: 在浏览器地址中输入了URL并回车 域名解析 服务器处理请求 浏览器处理 网页的绘制 一.在浏览器地址中输入URL 首先解释 ...

  6. xargs使用之空格处理

    xargs指定分隔符为'\n' (默认用空格分隔) locate xxx | xargs -d '\n' ls -l xargs使用 -0 参数会以字符串的'\0'结尾为分隔符,可以在文本传给xarg ...

  7. Thunar 右键菜单等自定义

    Thunar 右键菜单等自定义 可以使用图形界面或者直接编辑配置文件,二者是等价的. 图形界面: 以给"zip,rar,7z"等文件添加"在此位置使用unar解压缩&qu ...

  8. jieba分词单例模式及linux权限不够情况下tmp_dir自定义

    在linux环境下,没有root权限的情况下,有时会碰到如下问题: Building prefix dict from the default dictionary ... Loading model ...

  9. mongodb的学习 (3)

    聚合函数 - 添加基础数据:db.local.save({contry:'中国',name:'小明',score:77});db.local.save({contry:'中国',name:'小红',s ...

  10. 通过lua进行nginx的权限控制

    nginx_lua的安装 nginx使用luajit进行编译安装 使用openresty进行yum安装 openresty中将lua和nginx进行封装,详情可查看openresty官网 openre ...