面向对象思想
对象是不了解内部结构,知道表面的各种操作。面向对象是一种通用的思想。特点是抽象(抓住核心问题,随问题的不同抽出来的也不同)封装(把内部的功能封起来,用对象的人不用关心怎么实现的,但是写对象要知道)继承(从父类上继承一些方法和属性,子类又有自己的一些特性)
对象的种类
js内置的;宿主环境(window,document);自己创建的
对象的创建
创建对象通常有两种方式:
new构造函数法
var person=new Object();
person.name='成雪婷';
person.age=18;
这种用Object创建构造函数的方法相对繁琐,推荐用对象字面量的方式。
对象字面量
var person={
name:'成雪婷',
age:17
};//这种方式每个属性之间用逗号隔开,如果是最后一个属性就不要加逗号。
里面除了可以有属性和方法外,还可以用get和set型属性
var person={
_age: 10,
type:"小孩",
get: function(){
return this._age;
}
set: function(newValue){
this._age=newValue;
this.type=newValue>17?'成人':'小孩';
}
}//get是只读的,读取属性无参数,set是可写的,设置属性,可以接收一个参数,可写逻辑(一个属性随另一个属性变化)
对象的属性和方法
不管用哪种方式创建了对象,都会有以下的属性和方法。
constructor属性
constructor属性保存当前对象的构造函数。
var obj1=new Object();
obj1.id='obj1';
var obj2={
'id':'obj2'
}
console.log(obj1.constructor);//function Object(){}
console.log(obj2.consturctor);//function Object(){}
hasOwnProperty方法
该方法接收一个字符参数,该参数表示属性名称,用来判断该属性是否在当前对象的实例中而不是在对象的原型链中。
var arr=[]
console.log(arr.hasOwnProperty('length'))//true;
console.log(arr.hasOwnProperty('hasOwnProperty'))//false
isPrototypeOf(Object)方法
告诉我们当前对象是否是另一个对象的原型
var monkey={
hair: true,
feeds: 'banana'
}
function Human(name){
this.name=name;
}
Human.prototype=monkey;
var george=new Human('Geroge')
monkey.isPrototypeOf(george)//true
在这里我们预先知道了monkey可能是george的原型,能否在不知道某个对象原型是什么的情况下获得对象的原型呢?
Object.getPrototype(george).feeds//banans
toString()方法及toLocalString()方法
返回对象的字符串表示
var date=new Date();
console.log(date.toLocalString());//2017.11.29
valueOf()方法
返回对象的原始值,可能是字符串也可能是数值或者布尔值
var obj={
name:'obj'
}
console.log(obj.valueOf())//object{name:'obj'}
添加属性
普通方法
p.xx='adsf'
defineProperty方法
它接收3个参数:
obj:需要定义的属性的对象
propNane: 需要被定义的属性的名称
defineProperty:属性描述(Configurable[是否可以通过delete操作符来删除属性布尔值],Enumerable[是否能过通过for..in来枚举属性,Writable[表示属性值是否可以修改默认为true],Value[属性的值])
var obj={};
Object.definProperty(obj,'name',{
value:'name',
configurable: true,
writable: true
})
Object.defineProperties
和上面的类似,是用来定义对象属性的,不同的是它可以定义多个属性。
var obj={};
Object.defineProperty(obj.{
'name':{
value:'name',
configurable: true
}
'age':{
value: 20
}
});
属性获取
Object.keys()
该方法是用来获取给定对象的所有可枚举的自身属性的属性名,它返回一个数组。
function Parent(){
this.lastName='Black'
}
function Child(firstName){
this.firstName=firstName;
}
Child.prototype=new Parent();
var son=new Child('jack')
console.log(Object.keys(son));//['firstName']
代码中返回了firstName,并没有返回从prototype继承而来的lastName和不可枚举的相关属性。我们可以使用for..in来达到类似的效果。
for(var keys in p){
console.log(p[keys])
}//用for..in就会枚举所有的属性,包括原型中地
for(var keys in p){
if(p.hasOwnProperty(keys){
console.log(p[keys])
}
}//这样的话就只遍历对象的自身属性
删除属性
delete p.name
检查对象是否有某个属性
'name' in p==>true;
p.hasOwnProperty('name')==>ture
对于第一个判断的是属性是否在实例中,对于第二个,不管是在实例中还是在原型中,只要有该属性就返回true,两个都没有则返回false。
访问属性的方法
p.name
p['name']//如果是变量的话,只能用这种方法访问属性例如:
for(var a in p){
console.log(p[a])
}
普通函数和构造函数的区别
普通函数
- 不需要new关键词进行调用。
fn(); - 可以用return 语句返回值。
- 函数内部不建议使用this关键字。
硬要用的话要注意这时候发生了什么,如果在普通函数内部使用this关键字定义变量和函数,这时候this指向window全局对象。 - 函数命名以驼峰方式,首字母小写,动宾结构。
构造函数
用new关键字来调用定义的构造函数默认返回的是一个新对象,这个新对象具有构造函数定义的变量和函数/方法。
- 用new关键字调用。
var prince=new prince('charming',25) - 函数内部可使用this关键字。
在构造函数内部,this指向的是构造出的新对象,用this定义的变量或函数/方法,就是实例变量或实例函数/方法,需要用实例才能访问到不能用类型访问。
prince.age/prince.age - 默认不用return返回值
构造函数是不需要用return显式返回值的,默认会返回this也就是新的实例对象。 - 函数命名建义首字母大写
使用New关键字实例化的时候发生了什么?
1.创建空对象。
var prince={}
2.将构造函数prince{}中的this指向新创建的对象prince。
3.将prince的proto属性指向prince函数的prototype。创建对象和原型之间的关系。
4.执行构造函数prince()内的代码。
构造函数有return值怎么办?
没有显式调用return时,默认是返回this对象,也就是新创建的实例对象。
当构造函数里调用return时分两种情况:
- return 的是五种简单数据类型,这种情况下,忽视return 值依然返回this对象。
- return的是object对象。这种情况下不再返回this对象。而是返回return语句的返回值。
function Person(name){
this.name=name;
return (name:'cherry')
}
var person=new Person("sheila")
person.name//cherry
person//object{name:'cherry'}
理解构造函数
function Benjamin(username,sex){
this.username=username;
this.sex=sex;
}
var benjamin=new Benjamin('zuoji','male')
console.log(benjamin)
意味着上面的代码等同于
benjamin={
'username':'zuoji',
'sex':'male',
}
- 使用构造函数意味着所有的这些对象都可以使用相同的基本结构创建。
- 使用构造函数,意味着benjamin对象被明确的标记为“benjamin”
函数的实例。
console.log(benjamin instanceof Benjamin)//true - 使用构造函数意味着我们可以在原型上定义公共方法供多个实例共享。
function Benjamin(username,sex){
this.username=username;
this.sex=sex
}
Benjamin.prototype.getname=function(){
return this.username;
}
var benjamin=new Benjamin('zuoji','male')
var ben=new Benjamin('lemon','female')
console.log(benjamin.getName())
console.log(ben.getName())