对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 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
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
NOT NULL 和NULL
2007/01/15 PHP
php minixml详解
2008/07/19 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
初识laravel5
2015/03/02 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PDO::exec讲解
2019/01/28 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
Python循环语句中else的用法总结
2016/09/11 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python实现无边框进度条的实例代码
2020/12/30 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
校本教研工作制度
2014/01/22 职场文书
大学新闻系自荐书
2014/05/31 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书