JavaScript学习笔记（十）构造函数封装、对象检测、对象继承

构造函数封装

创建一个对象可以使用字面量或者构造函数的方法，但是纯对象只能调用Object.prototype中的方法，并且类型无法细分。（细分类型是指特定的对象可以调用特定方法）。

工厂函数模式

function PersonFactory(name,age,gender){var p =new Object();p.name = name;p.age = age;p.gender = gender;return p;
}
var p = PersonFactory("terry",12,"gender");
console.log(p.constructor); // [Function: Object]

问题：对象类型无法细分。

构造函数模式

function Person(name,age,gender){this.name= name;this.age = age;this.gender = gender;this.sayName = function(){console.log("my name is",this.name);}
}
//如果该函数使用new来调用，this指向当前实例对象,并且函数执行完毕后，会将当前实例对象返回。
// p1指向实例对象
var p1 = new Person("terry",12,"male");
console.log(p1);
// p2为undefined
var p2 = Person("terry",12,"male");
console.log(p2);
/*
Person {name: 'terry',age: 12,gender: 'male',sayName: [Function (anonymous)]
}
undefined*/

构造函数模式虽然解决了对象类型细分的问题，但是又带来了新的问题——函数存储，如果将函数存放到实例对象，每个实例对象拥有一个独自的函数，而这样是毫无意义。

构造函数(实例属性)+原型(实例方法，共享属性)

基本属性维护在实例中，共同的方法维护构造函数的原型中。

function Person(name,age,gender){this.name= name;this.age = age;this.gender = gender;
}
Person.prototype.sayName = function(){console.log("my name is",this.name);
}
Person.prototype.sayAge = function(){console.log("my age is",this.age);
}
var p = new Person("terry",12,"male");
console.log(p);
//Person { name: 'terry', age: 12, gender: 'male' }

问题：原型方法封装性较差。

增强版

function Person(name,age,gender){this.name= name;this.age = age;this.gender = gender;
}
Person.prototype = {constructor:Person,    // 核心点sayName :function(){console.log("my name is",this.name);}
}
var p = new Person("terry",12,"male");
console.log(p);
//Person { name: 'terry', age: 12, gender: 'male' }

对象检测

typeof obj;
obj.constructor ; // 查看obj的构造函数。
obj instanceof 构造函数； // obj是否是指定构造函数的实例。

对象继承

实例对象可以调用其构造函数原型中的方法以及其构造函数父函数原型中的方法。

var arr = [1,2,3];
//arr -> Array.prototype -> Object.prototype

我们还可以通过借用构造函数来继承其父函数原型中的方法。

function Animal(name,age){this.name = name;this.age = age;
}
Animal.prototype = {constructor :Animal,sayName:function(){console.log('my name is ',this.name);},sayAge:function(){console.log('my age is ',this.age);}
}
function Dog(name,age,gender){//借用构造函数Animal.call(this,name,age);/*this.name = name;this.age = age;*/this.gender = gender;
}
var p = new Dog("terry",12,"male");
console.log(p);
//Dog { name: 'terry', age: 12, gender: 'male' }

JavaScript学习笔记（十）构造函数封装、对象检测、对象继承相关推荐

JavaScript学习笔记三——查阅MDN、日期对象
目录一.学会查阅MDN文档 1.1 MDN 1.2如何学习对象中的方法二.Math对象 2.1math对象 2.2利用对象封装自己的数学对象 2.3随机数方法三.日期对象 3/1.日期格式化 3 ...
javascript学习笔记(十五) 间歇调用和超时调用
1.超时调用setTimeout() setTimeout() 方法接受两个参数,第一个参数是函数,第二个参数是时间(单位微秒),返回数值ID 1 setTimeout( function () { ...
javascript学习笔记(十九) 节点的操作
包括节点的创建.添加.移除.替换.复制本节要用到的html例子 1 <ul id="myList"> 2 <li>项目一</li> 3 < ...
arduino学习笔记十八--红外遥控检测
介绍远程遥控技术又称为遥控技术,是指实现对被控目标的遥远控制,在工业控制.航空航天.家电领域应用广泛.红外遥控是一种无线.非接触控制技术,具有抗干扰能力强,信息传输可靠,功耗低,成本低,易实现等显著 ...
JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记03-数组-Data对象-Math对象-包装类-字符串-正则
目录一.数组索引数组的特点 1.1.数组的创建 1.1.1.使用new关键字(构造函数) 1.1.2.使用字面量形式 1.1.3.创建数组的注意事项 1.2.数组的基本使用 1.2.1.存操作( ...
JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记（十五）
JavaScript学习笔记(十五) 事件事件是DOM(文档对象模型)的一部分.事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别. 一.事件流 1.冒泡型事件 IE上的解决方案就是 ...
JavaScript:学习笔记(9)——Promise对象
JavaScript:学习笔记(9)--Promise对象引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...