构造函数(方法)介绍

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

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

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

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

构造函数基本用法：

function 类名(参数列表){

    属性=参数值;//不带this为私有，带有this为共有。

}

如下例：

function Person(name, age) {

    this.name = name;//this指代当前对象(即实例化的对象)

    this.age = age;

}

//创建Person对象的时候，就可以直接给名字和年龄

var p1 = new Person("abc", 80);

var p2 = new Person("hello", 9);

window.alert(p2.name);

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>构造函数</title>

    <script type="text/javascript">

        function jiSuan(num1, num2, oper) {

            if(oper == "+") {

                return num1+num2;

            } else if(oper == "-") {

                return num1-num2;

            } else if(oper == "*") {

                return num1*num2;

            } else if(oper == "/") {

                return num1/num2;

            }

        }

        function Person(name, age, fun) {

            this.name = name;

            this.age = age;

            this.myFun = fun;

        }

        var p1 = new Person("aa", 9, jiSuan);

        var p2 = new Person("aa", 9, null);

        // window.alert(p1.name);

        // window.alert(p1.myFun(89, 90, "+"));

        window.alert(p2.myFun(1, 2, "*"));//Uncaught TypeError: p2.myFun is not a function

    </script>

</head>

<body>

</body>

</html>

构造方法(函数)小结

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

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

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

类定义的完善：

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

function 类名() {

    属性;

}

↓

function 类名() {

    属性;

    函数(方法);

}

↓

function 类名(参数1, 参数2, ...) {

    属性 = 参数1;

    函数(方法) = 参数2;

}

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

创建对象的又一种形式：

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>构造函数</title>

    <script type="text/javascript">

        var dog = {name:"小狗",

                    age:8,

                    fun1:function(){window.alert("hello,world");},

                    fun2:function(){window.alert("ok");}

                   };

         window.alert(dog.constructor);

         window.alert(dog.name+dog.age);

         dog.fun1();

         dog.fun2();

    </script>

</head>

<body>

</body>

</html>

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

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

例，

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>构造函数</title>

    <script type="text/javascript">

        var dog={name:'hello'};

        function test(){

            window.alert(this.name);

        }

        test();

        window.test();

        var name = "阿昀";

        //test.call(window);//输出阿昀

        test.call(dog); // <==> dog.test();

    </script>

</head>

<body>

</body>

</html>

3、for...in，如：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>构造函数</title>

    <script type="text/javascript">

        var dog = {name:'小名',

                   sayHello:function(a,b){window.alert("结果="+(a+b));}

                  };

        //循环列出dog对象的所有属性和方法 对象名['属性名']

        for(var key in dog){

            window.alert(dog[key]);

        }

    </script>

</head>

<body>

</body>

</html>

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

又如：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>构造函数</title>

    <script type="text/javascript">

        document.writeln("****当前浏览器window对象有属性和方法****<br/>");

        for(var key in window){

            document.writeln(key+":"+window[key]+"<br>");

        }

    </script>

</head>

<body>

</body>

</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. rapid js framework

    allcountjs.com http://mean.io/ https://www.meteor.com/ http://sailsjs.org/#!/ nodejs 博客 http://hexo. ...

  2. Java内部实现的观察者模式小记

    假如Admin要观察User的工资变化,当User的工资增加或者减少时,都会引起Admin输出相应的信息. 定义观察者接口:MyObserver.java package cn.liuning.wat ...

  3. 谈谈 Repository、IUnitOfWork 和 IDbContext 的实践

    谈谈 Repository.IUnitOfWork 和 IDbContext 的实践 上一篇:<DDD 领域驱动设计-谈谈 Repository.IUnitOfWork 和 IDbContext ...

  4. 小组开发项目--NABC分析

    我们小组--女神经们,开发项目是重力解锁,我认为我们的项目的最大特点就是不使用开锁键唤醒屏幕.下面我将针对这一特点进行NABC分析: N:经调查一部分人群的手机不能使用就是开机键坏了,我们就是针对这一 ...

  5. 结对开发--课堂练习--c++

    一.题目与要求 题目: 返回一个整数数组中最大子数组的和. 要求: 入一个整形数组,数组里有正数也有负数. 数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和. 求所有子数组的和的最大值. ...

  6. 原生javascript开发仿微信打飞机小游戏

    今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...

  7. springmvc返回jsp源代码解决办法

    url-pattern问题 spring用到forward("/WEB-INF/jsp/*.jsp")而forward当然是又要经过web.xml的映射的,然后,在URL匹配时,  ...

  8. Netsharp快速入门(之16) Netsharp基础功能(权限管理)

    第5章     Netsharp基础功能 5.1     权限配置 5.1.1  功能权限 1.配置权限功能点,打开平台工具-基础业务-操作管理 2.选择资源节点为销售订单,点添加常用操作,添加完成后 ...

  9. 圆形DIV

    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...

  10. 【BZOJ】【TJOI2015】线性代数

    网络流/最小割/最大权闭合图 2333好开心,除了一开始把$500^2$算成25000……导致数组没开够RE了一发,可以算是一次AC~ 咳咳还是回归正题来说题解吧: 一拿到这道题,我就想:这是什么鬼玩 ...