Javascript基础知识笔记四

一、使用工厂方法创建对象

减少代码的数量，提高代码的利用率
可以大量的创建对象
缺点：使用工厂方法创建的对象都是Object，对于不同对象不能进行区分。

function createPerson(name,age,gender){var obj=new Object();obj.name=name;obj.age=age;obj.gender=gender;return obj;
}
var obj=createPerson("小明",12,"男");
console.log(typeof obj); //Object
console.log(obj); //{"name":"小明","age":12,"gender":"男"}

问题引入：对于不同对象不能进行区分

//人
function createPerson(name,age,gender){var obj=new Object();obj.name=name;obj.age=age;obj.gender=gender;return obj;
}
//狗
function createDog(name,age,gender){var obj=new Object();obj.name=name;obj.age=age;obj.gender=gender;return obj;
}
var person=createPerson("小明",12,"男");
var dog=createPerson("旺财",3,"男");
console.log(typeof person); //object
console.log(typeof dog); //object

二、构造函数（需要使用到this的部分知识点，不懂点击这里）

function Person(){console.log("person");/*构造函数的执行流程*（1）立即创建一个对象*（2）将创建的对象设置为函数中的this*（3）逐行执行函数代码*（4）将创建的对象作为返回值返回*/
}
var per=new Person(); //person
console.log(typeof per); //object//创建对象
function Person(name,age,gender){this.name=name;this.age=age;this.gender=gender;
}
var per=new Person("小明",12,"男");
console.log(per.name); //小明
console.log(per instanceof Person); // true 判断per是否是Person的一个实例对象//此时如果在创建一个对象为Dog，进行比较
function Dog(){}
var dog=new Dog();
console.log(dog ==per);//false
console.log(per instanceof Dog); //false
console.log(per instanceof Object); //true

三、构造函数（升级版）原型对象

问题引入：

  function Person(name,age,gender){this.name=name;this.age=age;this.gender=gender;this.sayName:function(){console.log("当前对象名字"+this.name);}
}
var per=new Person("小明",12,"男");

如果说有1000个对象，就得创建1000个sayName方法(方法的内存堆地址是不一样的，具体理由点击这里)。而且1000个方法的形式都类似，降低了代码的利用率，还会造成堆空间的浪费。
此时有一种方法就是将方法设置为全局下：

function fun(){console.log("当前对象名字"+this.name);}function Person(name,age,gender){this.name=name;this.age=age;this.gender=gender;this.sayName:fun
}
var per=new Person("小明",12,"男");

但这样也不行，会污染全局环境。一旦不小心就会将该函数进行覆盖。
此时就引入了一个概念叫原型对象这个概念

什么是原型对象

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象，这个对象就是我们的原型对象
如果函数作为普通函数调用prototype没有任何作用
当函数以构造函数的形式调用时，所创建的对象中都会有一个隐含属性，指向该构造函数的原型对象
原型对象相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象

function Person(){}
function fun(){}
console.log(Person.prototype); //person
console.log(fun.prototype); //fun
console.log(fun.prototype ==Person.prototype); //false
//function Person(){}
var per =new Person(); //隐含属性，指向该构造函数的原型对象
var per1=new Person();
console.log(per.__proto__); //person
console.log(per1.__proto__); //person
console.log(Person.prototype ==per.__proto__); //true 指向同一对象
console.log(per1.__proto__ ==per.__proto__); //true 指向同一对象

解决方法：在原型对象上添加一个方法

Person.prototype.sayName=function(){console.log("当前对象名字"+this.name);
}
var per=new Person("小明",12,"男");
per.sayName(); //sayName没有在实例对象上

属性sayName是在原型对象上的，不在Person类上
如果在该实例化对象上找不到该对象属性，则会在原型对象上找该属性。
在该实例化对象上找到该对象属性，则直接使用。
在原型对象找不到，则向原型对象的原型上找，直到找到object对象的原型
在object对象的原型找不到，则返回undefined

判断一个属性是否存在在一个对象

//name当前属性是存放在原型上
console.log(name in per); //true//检查属于自己的属性
per.hasOwnProperty("name"); //false

欢迎访问我的个人博客

Javascript基础知识笔记四相关推荐

JavaScript基础知识笔记
基础语法 /* 多行注释 JS注释多行注释,注释中的内容不会被执行,但是可以在源代码中查看要养成良好的编写注释的习惯,也可以通过注释来对代码进行一些简单的调试 *///单行注释 //alert(& ...
javascript基础知识笔记整理——javaweb笔记
1.JavaScript 介绍 Javascript 语言诞生主要是完成页面的数据验证.因此它运行在客户端,需要运行浏览器来解析执行 JavaScript 代码. JS是Netscape网景公司的产品 ...
javaSE基础知识笔记(四)
多态--面向对象三大特征之三同类型的对象,执行同一个行为,会表现出不同的行为特征 1 多态的常见形式父类(或接口)类型new子类对象父类类型对象名称 = new 子类构造器;接口对象名称 = ...
Jquery源码中的Javascript基础知识（四）— jQuery.fn.init方法
$() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) {return new jQuery.fn.init( selector ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
JS学习笔记二——JavaScript 基础知识
JavaScript 基础知识一.JavaScript 变量二.JavaScript 的输出三.JavaScript 运算符四.结语一.JavaScript 变量变量是指在程序运行过程中, ...
access2013数据库实验笔记_医学科研实验基础知识笔记（十）：甲基化
往期回顾医学科研实验基础知识笔记(一):细胞增殖医学科研实验基础知识笔记(二):细胞凋亡检测医学科研实验基础知识笔记(三):细胞周期检测医学科研实验基础知识笔记(四):细胞自噬研究策略医学科 ...
JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性节点分类: 标签节点文本节点属性节点注释节点节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值常见的节 ...
Javascript基础知识之四（常用数组方法）
一.MDN链接 Array - JavaScript | MDNJavaScript的 Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象.https://developer.moz ...
JavaScript基础知识与脚本语言总结
1 Aptana插件安装 1.Aptana插件安装 <1>Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE. <2>它的特点包括: J ...