js 对象

时间:2022-09-29 14:41:29

JavaScript 的变量分为两类值,一种是原始值,一种是引用值;

原始值有:String Number  Boolean  Null  Undefined;

引用值有:Object  Funciton   Array   Date  RegExp;

这里主要讨论狭义的对象;

一、对象的基本操作:增(创建)、删、改、查

1 <script type="text/javascript">
2 /*
       *对象,基础的变量类型
       *字面量创建
       */
3 var techer={
4 name:"张三",
5 age:32,
6 sex:"male",
7 height:176,
8 weight:132,
9 tech:function(){
10 console.log("i am teching javascript");
11 },
12 smoke:function(){//对象里面的函数叫 方法
13 console.log("i am smoking ")
14 },
15 eat:function(){
16 console.log("i am having dinner")
17 }
18 };
19 //查:查询对象的name属性
20 console.log(techer.name);
21 techer.tech();
22 //增 对象增加address属性
23 techer.address = "北京";
24 console.log(techer);
25 //改 修改对象height属性
26 techer.height = 180;
27 console.log(techer.height);
28
29 //删 删除对象的address属性
30 // delete techer.address;
31 // delete techer.eat
32
33

a.对象中函数的访问:

1  <script type="text/javascript">
2 var techer={
3 name:"张三",
4 age:32,
5 sex:"male",
6 height:176,
7 weight:132,
8 tech:function(){
9 console.log("i am teching javascript");
10 },
11 smoke:function(){//对象里面的函数叫 方法
12 this.weight--;
13 console.log("my weight is "+ this.weight);
14 },
15 eat:function(){
16 this.weight++;//方法访问属性 使用 this
17 console.log("my weight is "+ this.weight);
18 }
19 };
20 techer.smoke();//执行smoke方法
21 techer.eat();//执行eat方法
22 </script>
23

b.对象中带参函数的访问:

<script type="text/javascript">
var attedance = {
students:[],
total:6,
join:function(name){
this.students.push(name);//这里this指代当前对象if(this.students.length == this.total){
console.log("学生已到齐!");
}else{

console.log(name + "到课");
}
},
leave:function(name){
var idx = this.students.indexOf(name);
if( idx != -1){
this.students.splice(idx,1);
console.log(name + "早退");
}

},
classOver:function(){
this.students = [];
console.log("已下课")
}


}
    //执行带参函数"张三");
attedance.join("李四");
attedance.join("王五");
attedance.join("赵麻子");
attedance.join("五十多分");
attedance.join("啊啊");
     attedance.leave("李四");
     attedance.classOver();
console.log(attedance);

</script>

c.对象的合并:

1.方式一

var a = {a:1};

var b = {b:2};

var d = Object.assign({},a,b); // 这样不会改变原对象

console.log(a);
console.log(b);
console.log(d);

结果是;

{a: 1}
 {b: 2}
 {a: 1, b: 2}

2.方式二

var a = {a:1};

var b = {b:2};

var d = Object.assign(a,b); // 这样不会改变原对象

console.log(a);
console.log(b);
console.log(d);

 {a: 1, b: 2}
 {b: 2}
 {a: 1, b: 2}

二、其他方式的对象创建

 

/*
    *对象字面量 创建方式
    */
var obj = {
name : "张三",
age : 35
}
 /*
      *其他创建函数的方式系:1.统自带的构造函数;2.自定义构造函数
      */
//1.构造函数 即 可以通过new关键字 去实例化 对象
//a.系统自带的构造函数
var object = new Object();//与 对象字面量 相等
object.name = "张三";
obj.age = 34;

//b.自定义构造函数
//规范是:函数名称 大驼峰
function Techer() {
this.name = "bb";
this.sex = "male";
this.weight = 130;
this.smoke = function() {
this.weight--;
console.log(" my weight is " + this.weight);
}
this.eat = function() {
this.weight++;
console.log('my weight is ' + this.weight);
}
}
//带参数的构造函数
function Techerx(name, sex, weight) {
this.name = name;
this.sex = sex;
this.weight = weight;
this.smoke = function() {
this.weight--;
console.log(" my weight is " + this.weight);
}
this.eat = function() {
this.weight++;
console.log('my weight is ' + this.weight);
}
}

//优化构造函数 相比之下的好处是,便于维护,不用关心参数的位置;
function TecherY(opt) {
this.name = opt.name;
this.sex = opt.sex;
this.weight = opt.weight;
this.smoke = function() {
this.weight--;
console.log(" my weight is " + this.weight);
}
this.eat = function() {
this.weight++;
console.log('my weight is ' + this.weight);
}
}

var techer1 = new Techer();
var techer2 = new Techer();
techer1.name = "aa";
console.log(techer1);
console.log(techer2);
techer1.smoke();
techer1.eat();

var techerx1 = new Techerx("joy", "女", 58);
console.log(techerx1)

var option = {
name : "joy",
sex : "女",
weight : 58
}
var techery1 = new TecherY(option);
console.log(techery1)

 

面试一般会问对象创建的一般有哪几种方式?区别是什么?从原型的角度去回答?

三、通过构造器创建对象的解析过程:

 a.解析过程

//实例化执行过程:GO: Car = function Car(){...}
// car1
// car2
//        AO: this:{
//       color:color,
//       brand:brand
//       }
//最后 默认return this; 放到 GO中
// 注意:return 原始值 无法改变return 的结果,还是 return this;,只有返回引用值,才可以改变返回类型;
//注意:这里是 构造函数,所以 默认返回的是 this ,如果是普通函数呢?默认返回是 undefined



function Car(color,brand){
this.color = color;
this.brand = brand;
}

var car1 = new Car("red","Benze");
var car2 = new Car("blue","BMW");
console.log(car1.color);
console.log(car2.color);

//同理
function Car2(color,brand){
var me = {
color: color,
brand: brand
}
return me;
}
var car21 = Car2("red2","Benze2");
var car22 = Car2("blue2","BMW2");
console.log(car21.color);
console.log(car22.color);
</script>

 b.构造器的一个重要应用call apply 和bind

call 和 apply 作用差不多;只是调用方式不同;

1 /*
2 *call/apply
3 */
4 function test2(){
5 console.log("a");
6 }
7 //执行 test2,test2() --》test2.call();
8 test2() ;
9 test2.call();
10
11 function Car(brand,color){
12 this.brand = brand;
13 this.color = color;
14 }
15 var car1 = {
16 width:2.5
17 };
18 var car2 = {};
19 Car.call(car1,"Benz","red");//car1,使用构造函数的属性,即 构造函数的this 指向了car1
20 Car.apply(car2,['BMW',"blue"])//car2,同理 ,这里可以看清call和appay的用法的区别,call是直接传参,apply参数放到数组里面了21 console.log(car1);
22 console.log(car2);
23
24 function Computer(){
25 this.plus = function(a,b){
26 console.log(a+b);
27 };
28 this.min = function(a,b){
29 console.log(a-b);
30 }
31 }
32
33 function FullComputer(){
34 Computer.apply(this);//复用了Computer的方法;35 this.mul = function(a,b){
36 console.log(a*b);
37 };
38 this.div = function(a,b){
39 console.log(a/b)
40 }
41 }
42
43 var fc = new FullComputer();
44
//这里补充 bind 
bind 和 call 的用法是一样的,
Car.call(car1,"Benz","red");
等同于
var fn = Car.bind(car1,"Benz","red");
fn();
也就是说,bind 返回的是一个函数,即 fn ;他不会立即执行这个函数,只有加了执行符号,才会执行 即fn() 才真正的取执行;
例如:
f.bind(obj),实际上可以理解为obj.f(),这时,f函数体内的this自然指向的是obj
var a = console.log.bind(console) ; a 就相当于 function log(){....}
var=.log; 这样会报错,log中的tihs 指向了window ,需要改变this的执行,所以加了bind(console)

call 和 apply在大型开发过程中的应用就是这样的,可以分模块的开发,再复用到某一模块中。他的原理即 改变this的指向;

如果对"改变this的指向"有疑问,可以在配合一个实例看,这里不详细展开​

四、包装类

 

系统一共提供3中包装类 Number String Boolean

 

1 <script type="text/javascript">
2 //包装类
3 //原始值没有自己的方法和属性
4 var a = 1;//原始值
5 console.log(a);
6 var b = new Number(a);//对象 这里的 Number就是包装类,系统一共提供3中包装类 Number String Boolean
7 b.len = 1;
8 b.add = function(){
9 console.log(1);
10 }
11 console.log(b);//对象
12 //其他例子
13 var x = 123;
14 x.len = 2; //此时,系统会做的是 new Number(123).len; 然后 delete (百度各大网站都说是 没有地方保存该对象)
15 console.log(x.len);//undefined
16 var str = "123";
17 console.log(str.length)// 其实是 new String(str).length ,string 类型 系统自带他;
18
19 var strins = "12345";
20 strins.length = 1;
21 console.log(strins)//12345 理由同上
22
23 //特殊的:数组截断
24 var arr = [1,2,3,4,5];
25 arr.length = 3
26 console.log(arr);//数组的截断方法[1,2,3]
27

 

五、对象的遍历及链式操作

a.链式操作:

 

1 var schedule = {
2 wakeup:function(){
3 console.log("Running!");
4 return this;
5 },
6 moring:function(){
7 console.log("go shopping");
8 return this;
9 },
10 noon:function(){
11 console.log(" having a rest");
12 return this;
13 },
14 afternoon:function(){
15 console.log("sutdying");
16 return this;
17 },
18 evening:function(){
19 console.log("working");
20 return this;
21 },
22 nigth:function(){
23 console.log("sleeping!");
24 return this;
25 }
26 }
27
28
29 schedule.wakeup();
30 //链式操作
31 schedule.wakeup().moring().noon().afternoon();
32

 

b.循环遍历

1 var arr = [1, 2, 3, 4, 5];
2 var car = {
3 name:'Benz',
4 color:'red',
5 width:'2.5',
6 length:5
7 }
8 //遍历数组
9 for(var i = 0;i < arr.length; i++){
10 console.log(arr[i]);
11 }
12 //遍历对象
13 for(var key in car){
14 //console.log(car.key)//car.key-->car['key'] -->undefined
15 console.log("key:"+car[key])
16 }
17
18 for(var i in arr){
19 console.log(arr[i]);
20 }
21 var myLang = {
22 No1:'html',
23 No2:'css',
24 No3:'javascript',
25 myStudyingLang:function(num){
26 console.log()
27 }
28

六、对象的属性

a.hasOwnProperty:判断当前对象有没有指定的属性

1 function Car(){
2 this.name = "bmw";
3 this.color = 'red';
4 this.width = "2.5";
5 this.length = "5";
6 }
7 //设置原型上的参数
8 Car.prototype = {
9 lang:5,
10 width:2.5
11 }
12
13 var bmw = new Car();
14 console.log(bmw.hasOwnProperty("name"));
15 for(var key in bmw){
16 //只打印对象本身的属性,不打印原型上的属性
17 if(bmw.hasOwnProperty(key)){
18 console.log(key+":"+bmw[key])
19 }
20

b.in 和 instanceof

1 //其他判断 判断对象是否存在某个属性 (包括原型上的)
2 console.log("lang" in bmw)
3 //判断构造函数 A对象的原型到底有没有B的原型 只要有重合 都是true
4 console.log(bmw instanceof

 

 

 

 


 

我从来不相信什么懒洋洋的*。我向往的*是通过勤奋和努力实现的更广阔的人生。 我要做一个*又自律的人,靠势必实现的决心认真地活着。