原型

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. Scrapy框架: settings.py设置

    # -*- coding: utf-8 -*- # Scrapy settings for maitian project # # For simplicity, this file contains ...

  2. 【题解】Tom的烦恼

    题目描述 Tom是一个非常有创业精神的人,由于大学学的是汽车制造专业,所以毕业后他用有限的资金开了一家汽车零件加工厂,专门为汽车制造商制造零件.由于资金有限,他只能先购买一台加工机器.现在他却遇到了麻 ...

  3. python调用tushare港股通每月成交统计

    接口:ggt_monthly 描述:港股通每月成交信息,数据从2014年开始 限量:单次最大1000 积分:用户积5000积分可调取,请自行提高积分,具体请参阅本文最下方积分获取办法 注:tushar ...

  4. 26-python基础-python3-global语句

    1-global 语句 如果需要在一个函数内修改全局变量,就使用 global 语句. 如果在函数的顶部有 global eggs 这样的代码,它就告诉 Python,“在这个函数中,eggs 指的是 ...

  5. 我爱Linux

    这道题卡了好久,题是一张图片,打开看到看提示以为是用哪个Linux命令处理,直到后来知道后面是python序列化文件的数据,将FF D9后保存出来,将序列化文件读出来写脚本把它画出来 import p ...

  6. 无法启动此程序 ,因为计算机中丢失MSVCP120.dll

    1.文件丢失问题 无法启动此程序 ,因为计算机中丢失MSVCP120.dll 具体如下图所示: 等dll文件丢失,可以去下载 DirectX修复工具去修复即可 http://www.pc6.com/s ...

  7. spring+springmvc+mybatis框架搭建

    一.开发前准备 1)ecplise4.11.0 百度网盘:https://pan.baidu.com/s/1wO9_I52lp0mYNeNTdnj80w 提取码:booa 2)jdk1.6.0_45  ...

  8. redis数据操作篇

    服务器端 服务器端的命令为redis-server 可以使⽤help查看帮助⽂档 redis-server --help 个人习惯 ps aux | grep redis 查看redis服务器进程su ...

  9. 一句话的Android增量更新框架(增量更新)

    转自:http://www.jianshu.com/p/a9ec8fa780e2 Android应用更新要使用完整的新版本Apk安装,增量更新则是提供一个新旧版本偏差数据的patch包供应用下载,然后 ...

  10. Java基本数据类型的类型转换规则

    基本类型转换分为自动转换和强制转换. 自动转换规则:容量小的数据类型可以自动转换成容量大的数据类型,也可 以说低级自动向高级转换.这儿的容量指的不是字节数,而是指类型表述的范围. 强制转换规则:高级变 ...