js面向对象

Posted on Posted in js
Tips: 本文创建于2014年5月21日,已超过 2 年,内容或图片可能已经失效!

面向(基于)对象

php:通过类找到
js:直接面对对象

js创建对象
1、通过字面量的方式创建对象

var cat ={name:'kitty',age:5,climb:function(){console.log('爬树')}};
var obj = {名称:值,名称:值}

[code lang="js"]
<script type="text/javascript">
// 创建对象
var cat = {name:'kitty',color:'yellow',climb:function(){console.log('爬树')}};
cat.climb();
// 已有对象对自己增加额外成员
cat.age = 6;
cat.run = function(){console.log('走路')};
console.log(cat);
</script>
[/code]

2、构造函数创建对象
var obj = new 函数名称();

[code lang="js"]
<script type="text/javascript">
// 通过构造函数实例化对象
/*
function person(){
this.color = 'yellow';
this.age = 20;
this.run = function(){
console.log('走路');
}
}
var tom = new person();
console.log(tom.color);
tom.run();
console.log(tom);
*/

// 通过实例化对象可以传递信息
function Animal(nm,ag){
this.name = nm;
this.age = ag;
this.hobby = function(){
console.log('爱好');
}
}
function tree(){

}
var songshu = new tree();
songshu.color='green';
songshu.age = 102;
songshu.guo = funcdion(){
console.log('果实');
}
</script>
[/code]

return 关键字对创建的影响

return 后面的语句不会执行

用一个对象给另一个变量进行赋值

[code lang="js"]
<script type="text/javascript">
function Animal(){
this.name = nm;
this.age = ag;
this.run = function(){
console.log('pao');
}
}
var dog = new Animal();
var black = dog;
black.color = 'black';
</script>
[/code]

删除对象成员
delete 对象.成员

[code lang="js"]
<script type="text/javascript">
var cat = {name:'kitty',age:9};
console.log(cat);
delete cat.age;
console.log(cat);
</script>
[/code]

object 实例化对象
var obj = new Object();

[code lang="js"]
<script type="text/javascript">
var dog = new Object();
dog.color = 'yellow';
console.log(dog);
</script>
[/code]

关键字this

1、this代表window
2、this代表dom节点对象
3、在函数内部代表调用该方法的当前对象
4、代表其他对象

函数的各种执行方式

1、函数可以进行普通方式调用
2、函数可以当作构造函数执行,前面有new关键字
3、函数可以当作对象的成员方法执行
4、call和apply方式执行

[code lang="js"]
<script type="text/javascript">
// call apply 减少变量污染的风险
function getInfo(){
console.log(this.color+'-'+this.age);
}
var cat = {color:"whiteblack",age:6,height:30};
var dog = {color:"yellow",age:9,hobby:function(){console.log('动')}}
// 使用cat和dog进行getInfo方法调用
// cat.say = getInfo;
// cat.say();
// getInfo.call(this指引,参数1,参数2……);
getInfo.call(cat);
// getInfo.apply(dog,[数组参数]);
// getInfo.apply(dog,['habagou',22])
</script>
[/code]

对象的构造器 constructor

构造器:使用什么函数进行的对象实例化操作

[code lang="js"]
<script type="text/javascript">
function Animal(){
this.color = 'red';
}
var cat = new Animal();
// 获得对象的构造器
console.log(cat.constructor); //Animal()
var dog = {age:8};
console.log(dog.constructor); // Object()
// 查看下函数的构造器
console.log(Animal.constructor); // Function()
var getInfo = new Function('console.log(1234)');
getInfo(); // 1234
var f1 = new Function('age','addr',"console.log(age+'-'+addr)");
f1('12','df'); // 12-df
</script>
[/code]

» 转载请注明来源:若我若鱼 » js面向对象

Leave a Reply

Your email address will not be published. Required fields are marked *

7 − four =