js构造函数
使用函数做自动化
function createObj(nick, age){
var obj = {
nick: nick,
age: age,
printName: function(){
console.log(this.nick);
}
};
return obj;
}
var obj3 = createObj('Byron', 30);
obj3.printName();
function createObj(nick, age){
var obj = {
nick: nick,
age: age,
printName: function(){
console.log(this.nick);
}
};
return obj;
}
var obj3 = createObj('Byron', 30);
obj3.printName();我们通过创建一个函数来实现自动创建对象的过程
有型一些
要想让我们构造出的函数有型一些,我们需要了解一些额外知识
function作为构造函数(通过new操作符调用)的时候会返回一个类型为function的name的对象
function可以接受参数,可以根据参数来创建相同类型不同值的对象
function实例作用域内有一个constructor属性,这个属性就可以指示其构造器
new
new 运算符接受一个函数 F 及其参数:new F(arguments...)。这一过程分为三步:
- 创建类的实例。这步是把一个空的对象的 proto 属性设置为 F.prototype 。
- 初始化实例。函数 F 被传入参数并调用,关键字 this 被设定为该实例。
- 返回实例。
根据这几个特性,我们可以改造一下创建对象的方式
function Person(nick, age){
this.nick = nick;
this.age = age;
this.sayName = function(){
console.log(this.nick);
}
}
var p1 = new Person();
instanceof
instanceof是一个操作符,可以判断对象是否为某个类型的实例
p1 instanceof Person; // true
p1 instanceof Object;// true
instanceof判断的是对象
1 instanceof Number; // false
问题
构造函数在解决了上面所有问题,同时为实例带来了类型,但可以注意到每个实例printName方法实际上作用一样,但是每个实例要重复一遍,大量对象存在的时候是浪费内存
构造函数
任何函数使用new表达式就是构造函数
每个函数都自动添加一个名称为
prototype属性,这是一个对象每个对象都有一个内部属性
__proto__(规范中没有指定这个名称,但是浏览器都这么实现的)
指向其类型的prototype属性,类的实例也是对象,其proto属性指向“类”的prototype
prototype

通过图示我们可以看出一些端倪,实例可以通过__prop__访问到其类型的prototype属性,这就意味着类的prototype对象可以作为一个公共容器,供所有实例访问。
抽象重复
我们刚才的问题可以通过这个手段解决
所有实例都会通过原型链引用到类型的prototype
prototype相当于特定类型所有实例都可以访问到的一个公共容器
重复的东西移动到公共容器里放一份就可以了
看下代码
function Person(nick, age){
this.nick = nick;
this.age = age;
}
Person.prototype.sayName = function(){
console.log(this.nick);
}
var p1 = new Person();
p1.sayName();
这时候我们对应的关系是这样的

终于有个靠谱的构建对象的方式了
js构造函数的更多相关文章
- JS构造函数的用法和JS原型
$(function(){ var rec = new Rectangle(5, 10); //alert(rec.width + "*" + rec.height + " ...
- 谈谈JS构造函数
//构造函数 //使自己的对象多次复制,同时实例根据设置的访问等级可以访问其内部的属性和方法 //当对象被实例化后,构造函数会立即执行它所包含的任何代码 function myObject(msg) ...
- Class和普通js构造函数的区别
Class 在语法上更加贴合面向对象的写法 Class 实现继承更加易读.易理解 更易于写 java 等后端语言的使用 本质还是语法糖,使用 prototype Class语法 typeof Math ...
- js 构造函数 & 静态方法 & 原型 & 实例方法
js 构造函数 & 静态方法 & 原型 & 实例方法 ES5 "use strict"; /** * * @author xgqfrms * @licens ...
- 深入研究js构造函数和原型
很快就要从新浪离职了,最近心情比较轻松,抽点空整理一下构造函数和原型的机理. 我们都知道,在经典设计模式中我们最常用的就是工厂模式.构造函数模式.原型模式这几种,听起来‘模式’好像很高大上的样子,实际 ...
- js构造函数,索引数组和属性的属性
本文主要介绍和小结js的构造函数,关联数组的实现方式和使用,及不可变对象和它的实现方式及他们使用过程中要注意的点 <script> function p(){ var len=argume ...
- JS构造函数原理与原型
1.创建对象有以下几种方式: ①.var obj = {}; ②.var obj = new Object(); ③.自定义构造函数,然后使用构造函数创建对象 [构造函数和普通函数的区别:函数名遵循大 ...
- js 构造函数(construction)与原型(prototype)
1.面向对象:js原型 java有class和instance,js仅仅有构造函数(function Cat(name,age){this.name=name;this.age=age}),为了实现数 ...
- JS构造函数、对象工厂、原型模式
1.对象创建的3中方法 1.1.对象字面量 var obj = { name: "mingzi", work: function () { console.log("wo ...
- 完整原型链详细图解之JS构造函数、原型 原型链、实例化对象
一.首先说一下什么是构造函数: 构造函数:用来在创建对象时初始化对象.特点:构造函数名一般为大写字母开头:与new运算符一起使用来实例化对象. 举例: function Person(){} //Pe ...
随机推荐
- Windows8.1下PHP环境配置(PHP5.6、Apache2.4、MySql5.6)
Step0 安装准备(均为64-bit版本) 下载php "Non Thread Safe"是IIS专用的,"Thread Safe"是Apache服务器用的. ...
- C#基础总复习02
继续更新第二篇: 1:一元运算符:++ -- ++:不管是前加加还是后加加,变量的值最终都会自身加一. 前加加和后加加的区别体现在参与运算的时候,如果是后加加,则首先拿原值参与运算, 运算完成后再自身 ...
- 08_Spring实现action调用service,service调用dao的过程
[工程截图] [PersonDao.java] package com.HigginCui.dao; public interface PersonDao { public void savePers ...
- 纯javascript 回到 顶部 实例
很多网站都会采用瀑布式的加载模式,像qq空间加载好友动态,为了用户体验更好,很多网站会加上回到顶部的连接,但大多数网站都是一下子就回到了顶部,当然,这样有这样的好处,但是我是个比较喜欢很炫的东西的人, ...
- Windows Linux HackMacintosh
我想把Windows Linux HackMacintosh三类系统融入到一台笔记本上的神经病应该不多. 我的电脑就一个SATA硬盘,BIOS还不是EFI的.一共同时安装了Windows 8.1.Op ...
- centos 7.0 mono&Jexus V5.5.3安装
首先我们需要先配置一下yum源中mono的引用说明: 第一步: vi /etc/yum.repos.d/mono.repo 第二步:在刚打开的文件中编辑如下内容 [mono]name=monobase ...
- Sublime Text 中使用Git插件连接GitHub
sublime Text的另一个强大之处在于它提供了非常丰富的插件,可以帮助程序员来适合大多数语言的开发.这些插件通过它自己的Package Controll(包管理)组件来安装,非常方便.一般常用的 ...
- php 导出excel表格
方式一:使用PHPExcel类库 //引入PHPExcel库文件(路径根据自己情况)include './phpexcel/Classes/PHPExcel.php'; $excel = new PH ...
- jquery中邮箱地址 URL网站地址正则验证实例代码
QQ网站有一个网站举报的功能,看了一些js代码觉得写得很不错,我就拿下来了,下面是一个email验证与url网址验证js代码,分享给大家 email地址验证 复制代码代码如下: function ch ...
- css实现div块半透明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...