构造函数(方法)介绍

什么是构造函数呢？在回答这个问题之前，我们来看一个需求：前面我们在创建人类的对象时，是先把一个对象创建好后，再给他的年龄和姓名属性赋值，如果现在我要求，在创建人类的对象时，就直接指定这个对象的年龄和姓名，该怎么做？

构造函数(方法)是一种特殊的方法，它的主要作用是完成对对象实例的初始化。它有几个特点：

  1. 构造函数(方法)名和类名相同。

  2. 在创建一个对象实例时，系统会自动的调用该类的构造方法完成对新对象的初始化。

构造函数基本用法：

  1. function 类名(参数列表){
  2.     属性=参数值;//不带this为私有，带有this为共有。
  3. }

如下例：

  1. function Person(name, age) {
  2.     this.name = name;//this指代当前对象(即实例化的对象)
  3.     this.age = age;
  4. }
  5. //创建Person对象的时候，就可以直接给名字和年龄
  6. var p1 = new Person("abc", 80);
  7. var p2 = new Person("hello", 9);
  8. window.alert(p2.name);

当然，在给一个对象初始化属性值的时候，也可以指定函数属性。如下例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>构造函数</title>
  6.     <script type="text/javascript">
  7.         function jiSuan(num1, num2, oper) {
  8.             if(oper == "+") {
  9.                 return num1+num2;
  10.             } else if(oper == "-") {
  11.                 return num1-num2;
  12.             } else if(oper == "*") {
  13.                 return num1*num2;
  14.             } else if(oper == "/") {
  15.                 return num1/num2;
  16.             }
  17.         }
  18.  
  19.         function Person(name, age, fun) {
  20.             this.name = name;
  21.             this.age = age;
  22.             this.myFun = fun;
  23.         }
  24.         var p1 = new Person("aa", 9, jiSuan);
  25.         var p2 = new Person("aa", 9, null);
  26.         // window.alert(p1.name);
  27.         // window.alert(p1.myFun(89, 90, "+"));
  28.         window.alert(p2.myFun(1, 2, "*"));//Uncaught TypeError: p2.myFun is not a function
  29.     </script>
  30. </head>
  31. <body>
  32.  
  33. </body>
  34. </html>

构造方法(函数)小结

  1. 构造方法名和类名相同

  2. 主要作用是完成对新对象实例的初始化

  3. 在创建对象实例时，系统自动调用该对象的构造方法

类定义的完善：

在介绍了构造函数(方法)后，我们类(原型对象)的定义就可以完善一步：

  1. function 类名() {
  2.     属性;
  3. }

↓

  1. function 类名() {
  2.     属性;
  3.     函数(方法);
  4. }

↓

  1. function 类名(参数1, 参数2, ...) {
  2.     属性 = 参数1;
  3.     函数(方法) = 参数2;
  4. }

面向对象编程进一步认识：

创建对象的又一种形式：

1、对于比较简单的对象，我们也可以这样来创建(可以指定普通属性和函数属性)，如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>构造函数</title>
  6.     <script type="text/javascript">
  7.         var dog = {name:"小狗",
  8.                     age:8,
  9.                     fun1:function(){window.alert("hello,world");},
  10.                     fun2:function(){window.alert("ok");}
  11.                    };
  12.          window.alert(dog.constructor);
  13.          window.alert(dog.name+dog.age);
  14.          dog.fun1();
  15.          dog.fun2();
  16.     </script>
  17. </head>
  18. <body>
  19.  
  20. </body>
  21. </html>

2、有时，会看到这样一种调用方法：

  1. 函数名.call(对象实例);

例，

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>构造函数</title>
  6.     <script type="text/javascript">
  7.         var dog={name:'hello'};
  8.         function test(){
  9.             window.alert(this.name);
  10.         }
  11.         test();
  12.         window.test();
  13.         var name = "阿昀";
  14.         //test.call(window);//输出阿昀
  15.         test.call(dog); // <==> dog.test();
  16.     </script>
  17. </head>
  18. <body>
  19.  
  20. </body>
  21. </html>

3、for...in，如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>构造函数</title>
  6.     <script type="text/javascript">
  7.         var dog = {name:'小名',
  8.                    sayHello:function(a,b){window.alert("结果="+(a+b));}
  9.                   };
  10.         //循环列出dog对象的所有属性和方法 对象名['属性名']
  11.         for(var key in dog){
  12.             window.alert(dog[key]);
  13.         }
  14.     </script>
  15. </head>
  16. <body>
  17.  
  18. </body>
  19. </html>

记住：可以使用该形式—对象名['属性名']—访问该对象中的属性和方法。

又如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>构造函数</title>
  6.     <script type="text/javascript">
  7.         document.writeln("****当前浏览器window对象有属性和方法****<br/>");
  8.         for(var key in window){
  9.             document.writeln(key+":"+window[key]+"<br>");
  10.         }
  11.     </script>
  12. </head>
  13. <body>
  14.  
  15. </body>
  16. </html>

JS面向(基于)对象编程--构造方法(函数)的更多相关文章

  1. js面向(基于)对象编程—类(原型对象)与对象

    JS分三个部分: 1. ECMAScript标准--基础语法 2. DOM  Document Object Model 文档对象模型 3. BOM  Browser Object Moldel 浏览 ...

  2. JS面向(基于)对象编程--三大特征

    抽象 在讲解面向对象编程的三大特征前,我们先了解什么叫抽象,在定义一个类时候,实际上就是把一类事物的共有的属性和行为提取出来,形成一个物理模型(模板).这种研究问题的方法称为抽象. 封装 什么是封装? ...

  3. JavaScript学习总结(九)——Javascript面向(基于)对象编程

    一.澄清概念 1.JS中"基于对象=面向对象" 2.JS中没有类(Class),但是它取了一个新的名字叫“原型对象”,因此"类=原型对象" 二.类(原型对象)和 ...

  4. JavaScript学习总结（5）——Javascript面向(基于)对象编程

    一.澄清概念 1.JS中"基于对象=面向对象" 2.JS中没有类(Class),但是它取了一个新的名字叫"原型对象",因此"类=原型对象" ...

  5. JavaScript基于对象编程

    js面向对象特征介绍 javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDirven)并具有安全性能的脚本语言.它具有面向对象语言所特有的各 ...

  6. 《Essential C++》读书笔记 之 基于对象编程风格

    <Essential C++>读书笔记 之 基于对象编程风格 2014-07-13 4.1 如何实现一个class 4.2 什么是Constructors(构造函数)和Destructor ...

  7. 借助boost bind/function来实现基于对象编程。

    boost bind/function库的使用: 替换了stl中mem_fun,bind1st,bin2nd等函数.用户注册回调函数需要利用boost/bind转化成库中boost/function格 ...

  8. JS面向对像编程四—— prototype 对象

    http://blog.csdn.net/fanwenjieok/article/details/54575560 大部分面向对象的编程语言,都是以“类”(class)作为对象体系的语法基础.Java ...

  9. 重学前端--js是面向对象还是基于对象？

    重学前端-面向对象 跟着winter老师一起,重新认识前端的知识框架 js面向对象或基于对象编程 以前感觉这两个在本质上没有什么区别,面向对象和基于对象都是对一个抽象的对象拥有一系列的行为和状态,本质 ...

随机推荐

  1. 纯真IP数据库导入mysql

    下载纯真IP数据库 安装后解压到本地为ip.txt 格式为: 1.1.145.0       1.1.147.255     泰国 沙功那空 1.1.148.0       1.1.149.255   ...

  2. [转]NHibernate之映射文件配置说明

    1. hibernate-mapping 这个元素包括以下可选的属性.schema属性,指明了这个映射所引用的表所在的schema名称.假若指定了这个属性, 表名会加上所指定的schema的名字扩展为 ...

  3. [转]vim常用命令

    [转]vim常用命令 http://www.cnblogs.com/sunyubo/archive/2010/01/06/2282198.html http://blog.csdn.net/wooin ...

  4. wire与reg的区别？转载大神！

    本文转自:http://www.cnblogs.com/thymon/archive/2010/06/09/1754541.html //------------------------------- ...

  5. shell 简介

    shell 简介 shell既是一种命令语言,也是一种程序设计语言.作为命令语言,它交互式地解析和执行用户输入的命令:作为程序设计语言,他定义了各种变量和参数,并提供了许多的高级语言才具有的控制结构, ...

  6. Xcode 7遇到 App Transport Security has blocked a cleartext HTTP 错误

    今天用Xcode 7 创建新项目用到 URL 发送请求时,报下面的错: “App Transport Security has blocked a cleartext HTTP (http://) r ...

  7. LintCode-Search for a Range

    Given a sorted array of integers, find the starting and ending position of a given target value. You ...

  8. nscd

    作用: Nscd is a daemon that provides a cache for the most common name service requests 可以缓存passwd,grou ...

  9. window窗口-button(按钮)-dialog(对话框,带按钮)

    描述:一个可拖动的窗口程序,默认情况下窗口自由移动.调整大小.打开关闭! 案例1(普通的窗口): <div class="easyui-window" icon-Cls=&q ...

  10. MVC 数据验证收集代码

    控制器 Home using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...