JS面向(基于)对象编程--构造方法(函数)
构造函数(方法)介绍
什么是构造函数呢?在回答这个问题之前,我们来看一个需求:前面我们在创建人类的对象时,是先把一个对象创建好后,再给他的年龄和姓名属性赋值,如果现在我要求,在创建人类的对象时,就直接指定这个对象的年龄和姓名,该怎么做?
构造函数(方法)是一种特殊的方法,它的主要作用是完成对对象实例的初始化。它有几个特点:
构造函数(方法)名和类名相同。
在创建一个对象实例时,系统会自动的调用该类的构造方法完成对新对象的初始化。
构造函数基本用法:
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>
构造方法(函数)小结
构造方法名和类名相同
主要作用是完成对新对象实例的初始化
在创建对象实例时,系统自动调用该对象的构造方法
类定义的完善:
在介绍了构造函数(方法)后,我们类(原型对象)的定义就可以完善一步:
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面向(基于)对象编程--构造方法(函数)的更多相关文章
- js面向(基于)对象编程—类(原型对象)与对象
JS分三个部分: 1. ECMAScript标准--基础语法 2. DOM Document Object Model 文档对象模型 3. BOM Browser Object Moldel 浏览 ...
- JS面向(基于)对象编程--三大特征
抽象 在讲解面向对象编程的三大特征前,我们先了解什么叫抽象,在定义一个类时候,实际上就是把一类事物的共有的属性和行为提取出来,形成一个物理模型(模板).这种研究问题的方法称为抽象. 封装 什么是封装? ...
- JavaScript学习总结(九)——Javascript面向(基于)对象编程
一.澄清概念 1.JS中"基于对象=面向对象" 2.JS中没有类(Class),但是它取了一个新的名字叫“原型对象”,因此"类=原型对象" 二.类(原型对象)和 ...
- JavaScript学习总结(5)——Javascript面向(基于)对象编程
一.澄清概念 1.JS中"基于对象=面向对象" 2.JS中没有类(Class),但是它取了一个新的名字叫"原型对象",因此"类=原型对象" ...
- JavaScript基于对象编程
js面向对象特征介绍 javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDirven)并具有安全性能的脚本语言.它具有面向对象语言所特有的各 ...
- 《Essential C++》读书笔记 之 基于对象编程风格
<Essential C++>读书笔记 之 基于对象编程风格 2014-07-13 4.1 如何实现一个class 4.2 什么是Constructors(构造函数)和Destructor ...
- 借助boost bind/function来实现基于对象编程。
boost bind/function库的使用: 替换了stl中mem_fun,bind1st,bin2nd等函数.用户注册回调函数需要利用boost/bind转化成库中boost/function格 ...
- JS面向对像编程四—— prototype 对象
http://blog.csdn.net/fanwenjieok/article/details/54575560 大部分面向对象的编程语言,都是以“类”(class)作为对象体系的语法基础.Java ...
- 重学前端--js是面向对象还是基于对象?
重学前端-面向对象 跟着winter老师一起,重新认识前端的知识框架 js面向对象或基于对象编程 以前感觉这两个在本质上没有什么区别,面向对象和基于对象都是对一个抽象的对象拥有一系列的行为和状态,本质 ...
随机推荐
- Android开发遇到的异常及解决办法
Android开发遇到的错误及解决方法1. Unable to resolve target 'android-7' 解决方案: 修改工程目录下的default.properties文件里的内容tar ...
- netlink
http://blog.csdn.net/zirconsdu/article/details/8569193 http://www.xuebuyuan.com/1725837.html netlink ...
- libevent 定时器示例
程序执行结果: 每隔2秒,触发一次定时器. (2)98行:evtimer_assign在event.h中定义如下: 再来看看event_assign函数: ev 要初始化的事件对象 base ...
- 28335 sci fifo send
#include "DSP2833x_Device.h"#include "DSP2833x_Examples.h"char buf[]={0x30,0x32, ...
- UIStepper swift
// // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...
- springboot日志
1.日志 Spring Boot内部日志系统使用的是Commons Logging,但开放底层的日志实现.默认为会Java Util Logging, Log4J, Log4J2和Logback提供配 ...
- React + Reflux
React + Reflux 渲染性能优化原理 作者:ManfredHu 链接:http://www.manfredhu.com/2016/11/08/23-reactRenderingPrinc ...
- java笔试题(3)
short a = 1; a = a + 1; 有错吗? short a = 1; a += 1; 有错吗? 对于short a = 1; a = a + 1;由于a + 1 运算时会自动提升表达式的 ...
- 丢掉 WinPE,使用 DISKPART 来分区吧
自 Windows Vista 之后的操作系统,如果在安装系统的时候使用 Windows 自带的分区功能,则会多出一个 100M 的系统保留分区.这会让一个物理硬盘,原先最多可以分 4 个主分区的,现 ...
- 【每日scrum】NO.3
1.感觉需求分析没有想象的那么简单,今天由于某些原因没有完成.