JS面向对象——构造函数模型
ECMAScript中的构造函数可用来创建特定类型的对象。我们可以创建自定义构造函数,从而定义对象类型的属性和方法,解决工厂模型中对象识别的问题。
<!DOCTYPE html>
<html>
<head>
<title>构造函数模型</title>
<script type="text/javascript">
function Student(name,age,sex){//构造函数首字母大写,普通函数首字母小写
//直接将属性和方法赋值给this对象
this.name=name;
this.age=age;
this.sex=sex;
this.sayName=function(){
alert(this.name);
};
} /****************************** 构造函数模型 ******************************/
/*创建Student的新实例实际经历的步骤:
(1)创建一个新对象
(2)将构造函数的作用域赋值给新对象(因此this指向了新对象)
(3)执行构造函数中的代码(为新对象添加属性和方法)
(4)返回新对象
*/
var stu1=new Student("Lucy",10,"girl");//使用操作符new
var stu2=new Student("Bob",9,"boy"); //以上的stu1和stu2这两个对象的constructor(构造函数)属性均指向Student
alert(stu1.constructor==Student);//true
alert(stu2.constructor==Student);//true //对象的constructor属性最初是用来表示对象类型的。检测对象类型使用instanceof更可靠
alert(stu1 instanceof Student);//true
alert(stu2 instanceof Student);//true
alert(stu1 instanceof Object);//true
alert(stu2 instanceof Object);//true
/*************************************************************************/ /**************************** 1.构造函数当作函数 **************************/
//当作构造函数
var stu3=new Student("Nike",10,"boy");
stu3.sayName();//"Nike"
//当作普通函数
Student("Greg",13,"boy");//添加到window对象
window.sayName();//"Greg"
//在另一个作用域中调用
var o=new Object();
Student.call(o,"Kristen",8,"girl");
o.sayName();//"Kristen"
/************************************************************************/ /**************************** 2.构造函数模型问题 *************************/
//问题:每个方法都要在每个实例上重新创建一遍,不同实例上的同名函数是不相等的。为解决这一问题于是就有了原型模型
alert(stu1.sayName==stu2.sayName);//false
/************************************************************************/ </script>
</head>
<body>
</body>
</html>
部分摘自《JavaScript高级程序设计(第3版)》
JS面向对象——构造函数模型的更多相关文章
- JS面向对象——组合使用构造函数模型与原型模型
该模型为创建自定义类型最常用的方式. <!DOCTYPE html> <html> <head> <title>组合使用构造函数模型和原型模型</ ...
- JS面向对象——组合使用构造函数模型与原型模型中的隐患
组合使用构造函数模型和原型模型中的问题,使用对象字面量重写原型模型会有隐患(涉及到原型的动态性),如下例: <!DOCTYPE html> <html> <head> ...
- JS面向对象——动态原型模型、寄生构造模型
动态原型模型 组合使用构造函数模型和原型模型,使得OO语言程序员在看到独立的构造函数和原型时很困惑.动态原型模型致力于解决该问题,它把所有的信息封装在构造函数中,通过在构造函数中初始化原型(仅在必要情 ...
- js面向对象的实现(example 二)
//这个方法和上篇文章(js面向对象的实现(example 一))中的方法类似,但是更为简洁 //通过函数赋值的方式来构造对象 //同样通过闭包的方式来封装对象及内部变量 (function () { ...
- 浅谈JS面向对象之创建对象
hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言有很大的意义. 首先什么是面向对象编程(oop),就是用对象的思 ...
- js面向对象继承
前言 最近看到js面向对象这章节了,主要学习了原型和面向对象继承关系,为了梳理自己的知识逻辑,特此记录. js的面向对象 先说说我目前了解的js创建对象方法 1.写一个函数,然后通过new创建对象 2 ...
- 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装
接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...
- JS面向对象笔记二
菜单导航,<JS面向对象笔记一>, 参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...
- 【JavaScript】 JS面向对象的模式与实践 (重点整治原型这个熊孩子 (/= _ =)/~┴┴ )
参考书籍 <JavaScript高级语言程序设计>—— Nicholas C.Zakas <你不知道的JavaScript> —— KYLE SIMPSON 在JS的面向 ...
随机推荐
- rpmgraph - 显示 RPM 软件包依赖关系图
SYNOPSIS rpmgraph PACKAGE_FILE ... DESCRIPTION rpmgraph 使用 PACKAGE_FILE 参数来产生一个软件包依赖关系图.每个 PACKAGE_F ...
- javaScript的预加载
在有大量图片的页面中,为了避免页面加载完图片还未加载完成,我们通常会使用js的图片预加载. 这是一个预加载的demo: 首先把图片放入到一个类名为imgSrcArr的变量当中: var imgSrcA ...
- html5 jquery音乐播放器,play()和pause()不起作用
今天在自己写的页面上加上背景音乐,当我点击图片时可以切换 播放/暂停 用jquery写的,方法总是提示没有pause这个方法! 检查了半天最后发现 你使用的是jquery选择器所以返回的是jquery ...
- 编写mapreduce的程序的套路
https://blog.csdn.net/qq_42881421/article/details/83543926 给出下面6个经典案例: http://www.cnblogs.com/xia520 ...
- Spring Transaction Isolation
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11530702.html Reference http://docs.spring.io/spring/ ...
- 一分钟小知识:scroll-behavior 让你的页面导航滚动更丝滑~
中午在[掘金]潜水摸鱼,看到这一个沸点,个人已经撸出特效: 下面放上 作者 的 掘金 地址 #掘金沸点# https://juejin.im/pin/5d649eaaf265da19752533d ...
- Linux系统重要文件(二)
Linux系统重要文件概述 一系统自动挂载文件 文件路径信息:/etc/fstab文件作用说明:实现存储设备自动挂载 [root@centos7 ~]# cat /etc/fstab # # /etc ...
- Python内建模块--collections
python内建模块--collections collections是Python内建的一个集合模块,提供了许多有用的集合类. namedtuple 我们知道tuple可以表示不变集合,例如,一个点 ...
- Python常用内置函数整理(lambda,reduce,zip,filter,map)
匿名函数lambda lambda argument1,argument2,...argumentN :expression using arguments 1.lambda是一个表达式,而不是一个语 ...
- ES6中模块加载出现的问题
1.如何在浏览器中import模块 在使用模块加载时不同浏览器有不同的行为 使用 import 加载模块时,需要把script标签的type属性改为module.此时Firefox浏览器支持impor ...