对Js OOP编程 创建对象的一些全面理解


Posted in Javascript onJuly 26, 2016

面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物。

对象的含义

对象可以是汽车,人,动物,文字,表单或者任何存在的事物等等。

对象有:

属性-------对象的某些特定的性质。

方法-------对象能做的事情。

事件-------能响应发生在对象上的事情。

我们可以通过创建一个人的对象来理解面向对象

人:

两只手,两只脚,一个头,还可以跑动。

手,脚,头,是人的属性,跑动是人的方法。

首先,我们来用最简单的方法创建一个对象

var person = {
      head: "one",
      hand: "two",
      foot: "two",
      run : function(){
        console.log("running");
      }
    }

这个方法一点都不实用,因为它是创建一个单独的对象,,而这个对象和任何常见的数据结构没有任何联系。

然后,我们用构造函数的方式创建一个对象

var Person = function(){//注意,首字母大写
      this.head = "one",
      this.hand = "two",
      this.foot = "two",
      this.run = function(){
        alert("running");
      }
    }
    var Joan = new Person();
    document.write(Joan.run())// "running"

这是用构造函数创建的对象,然后我们再加上一行代码看看

var Niki = new Person();
    alert(Joan==Niki) //false;

是的,现在创建了是两个不同的对象实例。

在JavaScript中的每个函数都有一个prototype的属性.如果某个函数被用作构造函数,则这个属性会被自动通过new调用创建对象的原型

console.log(Joan)

可以看到有一个__proto__:Person,其中__proto__是Joan的原型链.它是指向Person的原型.

JS在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__的内置属性,用于指向创建它的函数对象的原型对象prototype。

关于原型链的一些理解,在JavaScript高级程序设计 一书中写的非常详细。有兴趣的可以去看看,网上也有pdf的文档可以找到。不过建议还是买本书,支持原版嘛。

然后对prototype这个原型属性的任何更改能够应用于用new Person()构造的每一个实例对象,不管它是在更改之前还是更改后创建.为Person.prototype 添加新函数.具体如下:

var Person = function(){//注意,首字母大写
      this.head = "one",
      this.hand = "two",
      this.foot = "two"
    }
    Person.prototype.run = function(){
      alert("running");
    }
    var Joan = new Person();
    Joan.run()// "running"
    alert(Joan.__proto__===Person.prototype)//'true'

可以看到,在原型中创建方法是可以调用的,同时Joan的原型链是指向Person的原型的。

再看:

var Niki = new Person();//"runing"
     Person.prototype.run = function(){
       alert("running running")
     }
     Joan.run()//"running running"
     Niki.run()//"running running"

看,修改Person的原型方法,所有被new Person()创建的对象实例中的方法都被修改了,因为所有实例中共用的是同一个原型方法run。这就是原型的一种应用。

这就是关于创建对象的一些理解。

写了好久。也不知道有没有错误。 如果有错误,欢迎各位大大指点。

下次再写面向对象继承方面的东西。

以上就是小编为大家带来的对Js OOP编程 创建对象的一些全面理解全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
js+css实现select的美化效果
Mar 24 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 #Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 #Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 #Javascript
前端微信支付js代码
Jul 25 #Javascript
javascript与jquery动态创建html元素示例
Jul 25 #Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 #Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 #Javascript
You might like
十天学会php(1)
2006/10/09 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
node.js的事件机制
2017/02/08 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
python求素数示例分享
2014/02/16 Python
老生常谈Python基础之字符编码
2017/06/14 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python实现图像拼接
2020/03/05 Python
python 连续不等式语法糖实例
2020/04/15 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
详解Anaconda 的安装教程
2020/09/23 Python
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
工作收入证明范本
2015/06/12 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
社会实践心得体会范文
2016/01/14 职场文书
文书工作总结(范文)
2019/07/11 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
总结高并发下Nginx性能如何优化
2021/11/01 Servers