JS高级学习路线——面向对象进阶
Posted 李大白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS高级学习路线——面向对象进阶相关的知识，希望对你有一定的参考价值。
构造函数进阶
使用构造函数创建对象
用于创建对象 其除了是一个函数之外，我们又称之为构造对象的函数 - 简称构造函数
function Product(name,description){
//属性
this.name=name;
// 属性
this.description = description
//方法 又称方法属性 万物皆属性
this.buy=function(){
alert(‘buy‘)
}
}
//会拷贝一份
var p1 = new Product()
var p2 = new Product()
console.log(p1.constructor)
console.log(p2.constructor)
如何判断某个实例是否是根据某个构造函数创建的
if(p1 instanceof Product){
alert(‘true‘)
}
四种创建方式
1.传参形式
2.默认值
3.动态添加形式
4.混合模式
对象属性进阶1 get set权限
产品对象
对象内如何使用对象的属性和方法：this，对象外如何使用：先实例化，后用点语法
类 -- 抽象对象
function Product(name,price) {
/*属性 行为 可以为空或者给默认值*/
this.name=name
this.price=0;
this.description = ‘‘;
this.zhekou = ‘‘
this.sales = ‘‘
/*我们的需求：自动计算打折后的价格*/
/*形象的理解：包装*/
Object.defineProperty(this, "price", {
get: function () {return price*0.9;},
set: function (value) {
/*大概普通产品的价格都在0--1万*/
if(value>10000)
{
alert(‘产品价格必须在0--1万之间‘);
}else{
price = value;
}
}
});
}
get set 日期 拓展性知识
Object.defineProperty(this, "produceDate", {
get: function () {
return dateFormat(produceDate,‘yyyy-MM-dd‘);
},
set: function (value) {
produceDate = value;
}
});
function dateFormat(date,format) {
var o = {
"M+" : date.getMonth()+1, //month
"d+" : date.getDate(), //day
"h+" : date.getHours(), //hour
"m+" : date.getMinutes(), //minute
"s+" : date.getSeconds(), //second
"q+" : Math.floor((date.getMonth()+3)/3), //quarter
"S" : date.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(date.getFullYear()+"").substr(4- RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
}
权限的设置——可读
/*我们的需求：自动计算打折后的价格*/
Object.defineProperty(this, "price", {
value:5000000,
writable: t,
});
对象属性进阶2 公有私有属性
对象构造函数
// 私有属性好处： 安全 就类似闭包中的函数一样 减少污染
function Person(name) {
//私有属性，只能在对象构造函数内部使用
var className = "用户对象";
//公有属性,在对象实例化后调用
this.name = name;
//私有方法
var privateFunction = function () {
alert(this.name);
}
//公有方法
this.publicFunction = function () {
alert(this.name); //公有属性
alert(className); //正确 直接通过变量名访问
alert(this.className); //undefined 错误 不能这样访问
}
//公有属性
alert(className);
//正确 直接通过变量名访问
alert(this.className); //undefined 错误 不能这样访问
}
什么是公有属性：
使用象的人可以访问到对象内部的某个属性
init函数的引入
Product.prototype={
/*初始化函数的引入*/
/*我们将开发某个功能的初始化的工作都放在一起函数里面，用户只需要只要这一个工具就可以了*/
init:function(){
this.bindDOM()
this.bindEvents()
},
bindDOM:function(){}，
bindEvents:function(){}
}
私有成员的引入
config
var that = this;
//定义一个变量 ：这个变量可以被对象中所有的属性访问到。。。。
/*避免重复，减少内存*/
/*统一管理*/
this.config = {
btnConfirm: document.getElementById(‘btn‘),
btnBuy: document.getElementById(‘btn‘),
btnAddCart: document.getElementById(‘btn‘),
domProductName : document.getElementById(‘pname‘),
domProductPrice : document.getElementById(‘pprice‘),
sum : 1000,
des : document.getElementById(‘pdes‘),
youhuijia : document.getElementById(‘pyouhui‘),
zhekou : document.getElementById(‘pzhekou‘),
sales : document.getElementById(‘psales‘),
date : document.getElementById(‘date‘)
}
function bindDOM(){
that.config.name.innerhtml=that.name
}
对象实例进阶
数据类型的复习
call
console.log(toString.call(123)) //[object Number]
var num = 123;
console.log(num.toString())
数据类型检测进阶
数据类型判断 - typeof
console.log(‘数据类型判断 - typeof‘)
console.log(typeof undefined)//‘undefined‘
console.log(typeof null) // well-known bug
console.log(typeof true) //‘boolean‘
console.log(typeof 123) //‘number‘
console.log(typeof "abc") //‘string‘
console.log(typeof function() {}) //‘function‘
var arr=[];
console.log(typeof {}) //‘object‘
console.log(typeof arr)//‘object‘
console.log(typeof unknownVariable) //‘undefined‘
// 在使用 typeof 运算符时采用引用类型存储值会出现一个问题，
// 无论引用的是什么类型的对象，它都返回 "object"
数据类型判断 - toString.call
通用但很繁琐的方法： prototype
console.log(‘数据类型判断 - toString.call‘)
console.log(toString.call(123)) //[object Number]
console.log(toString.call(‘123‘)) //[object String]
console.log(toString.call(undefined)) //[object Undefined]
console.log(toString.call(true)) //[object Boolean]
console.log(toString.call({})) //[object Object]
console.log(toString.call([])) //[object Array]
console.log(toString.call(function(){})) //[object Function]
console.log(Object.prototype.toString.call(str) === ‘[object String]‘) //-------> true;
console.log(Object.prototype.toString.call(num) === ‘[object Number]‘) //-------> true;
console.log(Object.prototype.toString.call(arr) === ‘[object Array]‘) //-------> true;
console.log(Object.prototype.toString.call(date) === ‘[object Date]‘) //-------> true;
console.log(Object.prototype.toString.call(fn) === ‘[object Function]‘) //-------> true;
数据类型判断 - instanceof
// 判断已知对象类型的方法： instanceof
console.log(‘数据类型判断 - instanceof‘)
console.log(arr instanceof Array) //---------------> true
console.log(date instanceof Date) //---------------> true
console.log(fn instanceof Function) //------------> true
// alert(f instanceof function) //------------> false
// 注意：instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。
数据类型判断 - 根据对象的constructor判断： constructor
// 根据对象的constructor判断： constructor
var arr=[];
console.log(‘数据类型判断 - constructor‘)
console.log(arr.constructor === Array) //----------> true
console.log(date.constructor === Date) //-----------> true
console.log(fn.constructor === Function) //-------> true
数据类型判断 函数封装
判断变量是不是数值型
function isNumber0(val){
return typeof val === ‘number‘;
}
// 但有些情况就不行，比如：
// 1 var a;
// 2 alert(isNumber(parseInt(a)));
// 但实际上变量a是NaN，它是不能用于数值运算的。
// 所以上面的函数可以修改为：
function isNumber(val){
return typeof val === ‘number‘ && isFinite(val);
}
// 顺便介绍一下javascript isFinite() 函数，isFinite() 函数用于检查其参数是否是无穷大，
// 如果 number 是有限数字（或可转换为有限数字），
// 那么返回 true。否则，如果 number 是 NaN（非数字），或者是正、负无穷大的数，则返回 false。
判断变量是不是布尔类型
function isBooleanType(val) {
return typeof val ==="boolean";
}
判断变量是不是字符串类型
function isStringType(val) {
return typeof val === "string";
}
判断变量是不是Undefined
function isUndefined(val) {
return typeof val === "undefined";
}
var a;//a是undefined
var s = "strType";
alert("变量a是Undefined的判断结果是："+isUndefined(a));
alert("变量s是Undefined的判断结果是："+isUndefined(s));
判断变量是不是对象
function isObj(str){
if(str === null || typeof str === ‘undefined‘){
return false;
}
return typeof str === ‘object‘;
}
var a;
var b = null;
var c = "str";
var d = {};
var e = new Object();
alert("变量a是Object类型的判断结果是："+isObj(a));//false
alert("变量b是Object类型的判断结果是："+isObj(b));//false
alert("变量c是Object类型的判断结果是："+isObj(c));//false
alert("变量d是Object类型的判断结果是："+isObj(d));//true
alert("变量e是Object类型的判断结果是："+isObj(e));//true
判断变量是不是null
function isNull(val){
return val === null;
}
/*测试变量*/
var a;
var b = null;
var c = "str";
//弹出运行结果
alert("变量a是null的判断结果是："+isNull(a));//false
alert("变量b是null类型的判断结果是："+isNull(b));//true
alert("变量c是null类型的判断结果是："+isNull(c));//false
判断变量是不是数组
//数组类型不可用typeof来判断。因为当变量是数组类型是，typeof会返回object。
//方法1
function isArray1(arr) {
return Object.prototype.toString.call(arr) === ‘[object Array]‘;
}
//方法2
function isArray2(arr) {
if(arr === null || typeof arr === ‘undefined‘){
return false;
}
return arr.constructor === Array;
}
Jquery判断数据类型
// jQuery提供一系列工具方法，用来判断数据类型，以弥补JavaScript原生的typeof运算符的不足。
// 以下方法对参数进行判断，返回一个布尔值。
// jQuery.isArray()：是否为数组。
// jQuery.isEmptyObject()：是否为空对象（不含可枚举的属性）。
// jQuery.isFunction()：是否为函数。
// jQuery.isNumeric()：是否为数字。
// jQuery.isPlainObject()：是否为使用“{}”或“new Object”生成的对象，而不是浏览器原生提供的对象。
// jQuery.isWindow()：是否为window对象。
// jQuery.isXMLDoc()：判断一个DOM节点是否处于XML文档之中。
以上是关于JS高级学习路线——面向对象进阶的主要内容，如果未能解决你的问题，请参考以下文章