1、面向对象四种创建方式
1.1 传参形式
function Product(name){
this.name = name
}
Product.prototype={}
var iphone = new Product('iphone8s')
1.2 默认值
function Product(){
this.name = ''
this.price=0
}
Product.prototype={}
var iphone = new Product()
/*动态添加形式*/
iphone.description='XXXXXXXXXX'
iphone.images=[]
1.3 混合模式/动态添加形式
function Product(name,price){
this.name = name
this.price=price
this.version=1.0
this.add=function(){}
}
Product.prototype={}
var iphone = new Product()
/*动态添加形式*/
iphone.description='XXXXXXXXXX'
iphone.images=[]
console.log(iphone instanceof Product)//true
2.Object.defineProperty()和get,set
语法:
Object.defineProperty(obj, prop, descriptor)
参数说明:
- obj:必需。目标对象
- prop:必需。需定义或修改的属性的名字
- descriptor:必需。目标属性所拥有的特性
例子:
var obj = {
test:"hello"
}
//对象已有的属性添加特性描述
Object.defineProperty(obj,"test",{
configurable:true | false,//是否可以被删除,以及重新复制
enumerable:true | false,//目标属性是否可以被枚举
value:任意类型的值,//复制
writable:true | false//是否可以被重写
get:function (){} | undefined,//获取值,该方法自动调用
set:function (value){} | undefined//赋值,同上
});
具体可参考:理解Object.defineProperty的作用
3.对象的公私有属性
私有就是外部不可访问,而公有即可访问
简单例子 看看
//对象构造函数
// 私有属性好处: 安全 就类似闭包中的函数一样 减少污染
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 错误 不能这样访问
}
/*什么是公有属性:*/
/*使用象的人可以访问到对象内部的某个属性*/
var penson = new Person('xiaowang')
console.log(penson.className);
console.log(penson.name)
console.log(person.publicFunction())
console.log(person.privateFunction())
/*最小原则:*/
$('#tab').tab()
4.对象的数据类型
4.1 五大基础数据类型
<script>
document.write("<h1 style='color:red'>啦啦啦</h1>");
//数值型
var num1 = 1;
//字符串型
var num2 ='2333fgfgfggggggggggggggggggggg';
//布尔型
var num3 =false;
//对象型
var num4 = document.getElementById('mydiv');
//未定义
var num5;
var a = typeof(num1);
// var b ='b';
// alert(a+b);
document.write('<h1>num1的数据类型是'+a+'</h1>');
document.write('<h1>num2的数据类型是'+typeof(num2)+'</h1>');
</script>
4.2 数据类型判断
<script>
var num = 1
var str = '传智播客'
var bool=false;
var arr=[];
var obj={name:'传智播客'};
var date = new Date();
var fn = function(){}
/******************************************************************************
数据类型判断 - 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
</script>
自己封装几个判断类型的方法
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";
}
function isUndefined(val) {
return typeof val === "undefined";
}
function isObj(str){
if(str === null || typeof str === 'undefined'){
return false;
}
return typeof str === 'object';
}
function isNull(val){
return val === null;
}
function isArray2(arr) {
if(arr === null || typeof arr === 'undefined'){
return false;
}
return arr.constructor === Array;
}
4.3 Function和constructor
我们定义的各种数据类型的变量最终其实都是一个对象
var str = ‘1’
var str = new String()
var sum = 1;
var = new Number()
同样的,函数也是这样:
所有函数其实都是Function的实例,constructor属性其实就是Function对象的一个属性而已
对象又是通过函数实现的,对象其实就是一个Function的一个实例而已。。。
所以构造函数其实就是Function对象的一个实例
而实例拷贝自构造函数,所以实例含有Function对象的所有属性和方法
constructor属性:
它就是用于检测某个实例的构造函数是哪个,其实constructor是构造函数的一个隐藏属性
为什么实例也拥有这个属性呢??
因为实例的属性都是拷贝自构造函数,会拷贝所有的构造函数中的属性,包含你定义的也包含系统隐藏的
而 constructor属性是构造函数中的一个隐藏属性