VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • js 对象


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     </script>
复制代码

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.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.解析过程

复制代码
 <script type="text/javascript">
//实例化执行过程: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     fc.plus(1,1);
复制代码
//这里补充 bind 
bind 和 call 的用法是一样的,
Car.call(car1,"Benz","red");
等同于
var fn = Car.bind(car1,"Benz","red");
fn();
也就是说,bind 返回的是一个函数,即 fn  ;他不会立即执行这个函数,只有加了执行符号,才会执行 即fn() 才真正的取执行

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

如果对"改变this的指向"有疑问,可以在配合一个实例看,这里不详细展开;https://blog.csdn.net/ganyingxie123456/article/details/70855586

回到顶部

四、包装类

 

系统一共提供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     </script>
复制代码

 

回到顶部

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

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 Car)

 

 

 

 

 

 

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

来源:https://www.cnblogs.com/lixiuming521125/p/10950695.html

相关教程