无尾树袋熊
无尾树袋熊

JavaScript面向对象

创建对象

对象可以完成某件事.
必须先有类,再通过类创建对象

在JavaScript中,只要给一个对象添加了属性和方法之后,就可以通过这个对象访问对应的属性和方法

  1. 方法一:通过默认的Object这个类(构造函数)来创建
    var per = new Object();
    //动态给对象添加属性和方法
    per.name = "yzf";
    per.age = 18;
    per.say = function () {
        console.log("hello");
    };
    console.log(per.name);
    console.log(per.age);
    per.say();
  1. 方法二:通过字面量来创建对象(语法糖)
    var per = {};// 相当于 var obj = new Object();
    per.name = "yzf";
    per.age = 18;
    per.say = function () {
        console.log("hello");
    };
    console.log(per.name);
    console.log(per.age);
    per.say();
    
    //方法二:
    var per = {
    name : "yzf",
    age : 18,
    say : function () {
        console.log("hello");
        }
    };
    console.log(per.name);
    console.log(per.age);
    per.say();
  1. 方法三:先自定义构造函数,再通过构造函数来创建对象

this关键字

  1. 每一个函数中都有一个this关键字
  2. this关键字的值是当前调用函数的那个对象(==谁调用了当前的函数, this就是谁==)
  3. 注意点:默认情况下所有的函数都是通过window调用的
    function say() {
        console.log("hello");
        console.log(this); //window
    }
    say();
  1. 将一个函数和一个对象绑定在一起之后, 函数就变成了方法
    var per = {
        name: "yzf",
        age: 18,
        say: function () {
            console.log("hello");
            console.log(this);
        }
    }
    console.log(per.name);
    console.log(per.age);
    // say();//报错,方法只能由所属对象调用
    per.say();// this是per这个对象
  1. 注意点:
    1. 函数可以直接调用,在JavaScript中函数属于window对象
    2. 方法不可以直接调用,方法属于其他对象

工厂函数创建对象

    function creatPerson(name, age) {
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.say = function () {
            console.log("hello");
        };
        return obj;
    }
    var per1 = creatPerson("yzf", 18);
    var per2 = creatPerson("zx", 18);

构造函数创建对象

  1. 构造函数:一个专门用于创建对象的函数
  2. 构造函数的名称首字母必须大写
  3. 构造函数必须通过new来调用
  4. 本质上是工厂函数的简化
  5. 通过Object对象,或者通过字面量, 或者通过工厂函数创建的对象, 我们无法判断这个对象是谁创建出来的但是通过构造函数创建的对象, 我们可以判断这个对象是谁创建出来的
  6. 默认情况下每一个对象都有一个隐藏的属性, 叫做constructor, 这个属性指向了创建当前对象的构造函数
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.say = function () {
            console.log("hello");
        };
    }
    var per1 = new Person("yzf", 18);
    var per2 = new Person("zx", 17);
    console.log(per1);
    console.log(per2);
    // console.log(per2.constructor);  //指向Person构造函数
    console.log(per1 instanceof Person); //判断per1是否由Person创建

性能问题:

默认情况下,只要创建一个对象就会在对象中开辟一块存储空间,该存储空间中会存储对象的所有数据

    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.say = function () {
            console.log("hello");
        };
    }
    var per1 = new Person("yzf", 18);
    var per2 = new Person("zx", 17);
    console.log(per1.say === per2.say); //false 两个函数的地址不同

say相同,但每个say都保存在不同的地址里,消耗内存

解决构造函数性能问题

方法一:

  1. 注意点:==在JavaScript中,函数也是一个对象==
    function say() {
        console.log(this.name, this.age);
    }
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.say = say;
    }
    var per1 = new Person("yzf", 18);
    var per2 = new Person("zx", 17);
    console.log(per1.say === per2.say); //true 两个say函数的地址相同
  1. 将方法定义在外面,然后将函数的地址赋值给属性,每次创建对象,say的地址都相同
  2. 弊端:==将函数定义在了全局作用域中, 所以如果定义了多个函数, 会导致全局作用域的名称匮乏==

方法二:

  1. 将所有函数都封装到另一个函数(对象)中,函数名称就不在全局作用域中,就不会导致全局作用域命名匮乏问题
  2. 然后将对象中方法的地址复制给使用者即可
    var fns = {
      say: function () {
          console.log(this.name, this.age);
      }
    };
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.say = fns.say;
    }
    var per1 = new Person("yzf", 18);
    var per2 = new Person("zx", 17);
    console.log(per1.say === per2.say);// true

方法三(重要):

  1. 每一个构造函数都有一个默认的属性prototype
  2. ==prototype属性指向构造函数的原型对象==
  3. 为了解决全局作用域命名匮乏的问题,将所有的方法都放到了一个对象中,所以既然构造函数的prototype就对应一个对象,所以我们就可以将方法都放到这个对象中
  4. 注意点:
    1. 所有通过同一个构造函数创建出来的对象,都可以放到该构造函数的原型对象
    2. 所有通过同一个构造函数创建出来的对象,访问的都是同一个原型对象
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.say = function () {
        console.log(this.name, this.age);
    };
    var per1 = new Person("yzf", 18);
    var per2 = new Person("zx", 17);
    per1.say();
    per2.say();
    //===是在判断两个函数的地址是否相同
    console.log(per1.say === per2.say); //true
  1. 注意点:
    1. 私有成员（一般就是非函数成员）放到构造函数中
    2. 共享成员（一般就是函数）放到原型对象中
    3. 如果重置了prototype记得修正 constructor 的指向

构造函数-对象-原型对象的关系

  1. 每个构造函数都有一个默认的属性prototype,这个属性指向一个对象(原型对象)
  2. 每个原型对象都有一个默认的属性constructor,这个属性指向原型对象对应的构造函数
  3. 每个对象都有一个默认的属性, proto,这个属性指向创建它的构造函数的原型对象
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.say = function () {
        console.log(this.name, this.age);
    };
    Person.prototype.type = "猪";
    var per1 = new Person("zx", 17);
    console.log(per1.type); //"猪"
    console.log(Person.prototype.constructor === Person); //true
    console.log(Person.prototype === per1.__proto__); //true
    console.log(per1.__proto__.constructor === Person); //true

原型链

console.log(per1.__proto__.__proto__.__proto__);//null

属性和方法的查找顺序

  • 属性
  1. 先在当前对象中查找有没有type属性, 如果有, 使用当前的
  2. 如果当前对象没有type属性,会到原型对象中查找,如果有,就使用原型对象中的type属性
  3. 如果原型对象中没有,会继续根据proto链条查找,如果找到null都没有, 就输出undefined
  • 方法
  1. 会先在当前对象中查找有没有say方法, 如果有, 使用当前的
  2. 如果当前对象没有say方法,会到原型对象中查找,如果有,就使用原型对象中的say方法
  3. 如果原型对象中没有,会继续根据proto链条查找,如果找到null都没有, 就报错
    function Person(name, age) {
        this.name = name;
        this.age = age;
        // this.say = function () {
        //     console.log("我是say");
        // }
        // this.type = "我不是猪";
    }
    Person.prototype.type = "猪";
    Person.prototype.say = function () {
        console.log(this.name, this.age);
    };
    var per1 = new Person("zx", 17);
    // per1.say(); //我是say
    per1.say();//zx 17
    // console.log(per1.type);//我不是猪
    per1.type = "猪人";
    console.log(per1.type);//猪人
    //在直接通过对象访问属性的时, 不会修改原型中的属性
    //会在当前对象中新增一个属性
    console.log(per1.__proto__.type);//猪

解决构造函数性能的解决方案(最终)

    // 定义了一个构造函数
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    // 给构造函数的原型对象添加属性和方法
    Person.prototype.say = function () {
        console.log(this.name, this.age);
    };
    Person.prototype.type = "人";

    // 利用构造函数创建实例对象
    var obj1 = new Person("lnj", 13);
    var obj2 = new Person("zq", 18);

    /*
   私有成员（一般就是非函数成员）放到构造函数中
   共享成员（一般就是函数）放到原型对象中
   如果重置了 prototype 记得修正 constructor 的指向
    */
    console.log(obj1.say === obj2.say); //true

自定义原型对象

  1. 原型对象也是一个对象,所以我们可以自定义构造函数的原型对象
  2. 注意点:自定义原型对象一定要保持三角恋的关系,一定要设置constructor: 所属的构造函数
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype = {
        constructor:Person,
        say:function () {
            console.log(this.name, this.age);
        }
    };
    var p1 = new Person("yzf", 18);
    console.log(p1.__proto__);
    p1.say();
    console.log(p1.__proto__.constructor);

对象的公私有属性及方法

  1. 全局变量和函数:写在一对script标签中或者写在一个单独的JS文件中的变量和函数
  2. 局部变量和函数:在其它函数中定义的变量或者函数
  3. 默认情况下对象的属性和方法都是公有的
  4. 构造函数也是一个函数,所以在构造函数中直接定义的变量就是局部变量, 外界就不能访问
    function Person() {
        this.name = "yzf";
        this.age = 18;
        this.say = function () {
            console.log(this.age, this.name);
        }
    }
    var p1 = new Person();
    p1.say();
    // say();//报错,无法直接访问

实例属性方法和静态属性方法

  • 实例:==通过构造函数创建出来的对象==
  • 实例属性和实例方法:通过对象才能访问的属性和方法
  • 静态属性和静态方法:不需要通过对象就能访问的属性和方法;通过构造函数能直接访问的属性和方法就称之为静态属性和方法
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.say = function () {
            console.log(this.name, this.age);
        }
    }
    var p1 = new Person("yzf", 18); //实例
    p1.say(); //实例方法
    console.log(p1.name); //实例属性
    Person.type = "人";
    Person.eat = function () {
        console.log("吃饭");
    };
    console.log(Person.type); //静态属性
    Person.eat(); //静态方法

继承

方式一:借用原型链

  • 由于直接创建了父类对象作为子类的原型对象,所以在指定原型对象的时候就必须指定父类的参数
  • 企业开发中每个子类对象的参数都可能不一样, 这种方案不行
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.say = function () {
        console.log(this.name, this.age);
    };
    function Student(score) {
        this.score = score;
    }
    //修改Student的原型对象
    Student.prototype = new Person("yzf", 18);//指定原型对象的时候就必须指定父类参数
    //修改原型对象constructor指向Student
    Student.prototype.constructor = Student;
    var stu1 = new Student(99);

方式二:利用构造函数

三种方法:

  1. bind方法:
    • 修改函数内部的this,但是不会调用这个函数,会返回一个新的函数
    var obj = {
        name:"yzf"
    };
    function test(a, b) {
        console.log(a + b);
        console.log(this);
    }
    // test(10,20);//this是window
    var fn = test.bind(obj,10,20);
    fn();//this是obj
  1. call方法:
    • 修改函数内部的this的, 但是会调用这个函数(参数依次用逗号隔开)
    var obj = {
        name:"yzf"
    };
    function test(a, b) {
        console.log(a + b);
        console.log(this);
    }
    test(10,20);//this是window
    test.call(obj,10,20); //this是obj
  1. apply方法:
    • 修改函数内部的this的,但是会调用这个函数(参数需要放在一个数组中)
    var obj = {
        name:"yzf"
    };
    function test(a, b) {
        console.log(a + b);
        console.log(this);
    }
    test(10,20);//this是window
    test.apply(obj,[10,20]); //this是obj
  • 构造函数实现继承
    function Person(name, age) {
        this.name = name;
        this.age = age;
        // this.say = function () {
        //     console.log(this.age, this.name);
        // }
    }
    Person.prototype.say = function () {
        console.log(this.age, this.name);
    };
    function Student(score, name, age) {
        Person.call(this, name, age);
        //仅仅是借用父类构造函数来给子类动态添加属性或方法,没有其它关系
        this.score = score;
    }
    var stu1 = new Student(99,"yzf",18);
    stu1.say(); //报错,无法访问父类构造函数原型对象的方法

方式三:组合方式一

  • 借用构造函数动态添加
  • 将原型修改为父类的原型
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.say = function () {
        console.log(this.age, this.name);
    };
    function Student(score, name, age) {
        Person.call(this, name, age);
        this.score = score;
    }
    //修改子类的原型对象为父类的原型
    Student.prototype = Person.prototype;
    Student.prototype.constructor = Student;
    Student.prototype.eat = function () {
        console.log("吃东西");
    };
    var stu1 = new Student(59.9, "yzf", 18);
    stu1.say();
    stu1.eat();

    var p1 = new Person("zx", 13);
    console.log(p1.__proto__.constructor);//指向Student构造函数
  • 缺点:会破坏父类的三角关系.父类和子类为同一个原型对象,子类原型添加属性和方法后父类也会收到影响.不推荐使用

方式四:组合方式(最终版)

    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    //为父类原型添加方法
    Person.prototype.say = function () {
        console.log(this.name, this.age);
    };
    //子类
    function Student(score, name, age) {
        Person.call(this, name, age);
        this.score = score;
    }
    //修改子类的原型对象为父类的对象
    Student.prototype = new Person();
    Student.prototype.constructor = Student;
    //创建子类对象
    var stu1 = new Student(66, "yzf", 18);
    //创建父类对象
    var p1 = new Person("zx", 99);
    //为子类原型添加方法
    Student.prototype.eat = function () {
        console.log("吃东西");
    };
    stu1.say(); //子类对象可以访问父类原型中的方法
    stu1.eat();//子类对象可正常访问子类原型的方法
    p1.say();//父类对象可以访问父类原型中的方法
    p1.eat();//报错,父类对象无法访问子类原型中的方法

多态

    function Dog(name) {
        this.name = name;
        this.say = function () {
            console.log("汪汪");
        }
    }
    function Cat(name) {
        this.name = name;
        this.say = function () {
            console.log("喵喵");
        }
    }
    var dog = new Dog("旺财");
    var cat = new Cat("猫咪");

    function bark(animal) {
        console.log(animal.name);
        animal.say();
    }
    bark(dog);
    bark(cat);

对象的增删改查

  1. 查询增加对象属性
  • 访问对象的属性(==查询==)
    1. 对象.属性名称方式, 操作属性
    2. 对象["属性名称"]方式, 操作属性
    console.log(p.name);
    console.log(p["age"]);
    
    p.name = "zx";
    p["age"] = 18;
  • 对象如果没有就会新增
  • ==删除==对象中的属性
delete p.name;
  1. 判断对象中==是否存在==某个属性
  • 方式一:"属性名称" in 对象 存在返回true,没有返回false
//会在当前对象中查找,如果没有就在原型对象上查找,直到null
console.log("age" in p);
console.log("name" in p);
  • 方式二:通过对象 .hasOwnProperty("属性名称")方式来判断
//只会在当前对象上查找
console.log(p.hasOwnProperty("age"));
  1. 判断某个属性是否只存在于原型对象中
    function res(obj, name) {
        if(!obj.hasOwnProperty(name)){
           if(name in obj){
               return true
           }
        }
        return false
    }

遍历对象

  • JavaScript中对象是可以直接遍历的
  • 利用高级for循环:for(var key in obj){}
  • 会将对象中的每一个属性依次取出来赋值给key,有多少个属性,循环就会执行多少次
    function Person() {
        this.age = 18;
        this.name = "yzf";
        this.say = function () {
            console.log(this.name, this.age);
        }
    }
    var p1 = new Person();
    for(var key in p1){
        // console.log(p1[key]);
        if(p1[key] instanceof Function){
            continue
        }
        console.log(p1[key]);//去对象中查找当前遍历到名称的属性
        console.log(p1.key);//代表去对象中查找名称叫做key的属性
    }

对象的拷贝

  • 拷贝:将一个对象赋值给另外一个对象

浅拷贝

将A对象赋值给B对象:修改B对象的属性和方法会影响到A对象的属性和方法

    function Person(dog) {
        this.age = 18;
        this.name = "yzf";
        this.say = function () {
            console.log(this.name, this.age);
        };
        this.dog = dog;
    }
    var p1 = new Person({
        name:"mm",
        age:3
    });
    var p2 = new Person();
    //直接拷贝
    // p2 = p1;
    // p2.name = "zx";
    // console.log(p1.name);//zx

    //逐一拷贝
    function copy(o1, o2) {
        for(var key in o1){
            o2[key] = o1[key];
        }
    }
    copy(p1, p2);
    p2.name = "zx";
    p2.dog.name = "wc";
    p2.say(); //zx 18
    console.log(p2.dog);//ww
    p1.say(); //yzf 18
    console.log(p1.dog);//ww 同样指向dog对象

深拷贝

将A对象赋值给B对象:修改B对象的属性和方法不会影响到A对象的属性和方法, 我们称之为深拷贝

    function Person(dog) {
        this.age = 18;
        this.name = "yzf";
        this.say = function () {
            console.log(this.name, this.age);
        };
        this.dog = dog;
    }
    var p1 = new Person({
        name:"mm",
        age:3
    });
    var p2 = new Person();
    function deepCopy(o1, o2) {
        //遍历对象
        for(var key in o1){
            var item = o1[key];
            //判断属性是否为引用数据类型
            if(o1[key] instanceof Object){
                //新建一个空对象
                var temp = new Object();
                deepCopy(item, temp);
                o2[key] = temp;
            }else {
                //基本数据类型
                o2[key] = o1[key];
            }
        }
    }
    deepCopy(p1, p2);
    // console.log(p2);
    p2.dog.name = "wc";
    console.log(p1.dog.name); //mm
    console.log(p2.dog.name); //wc

注意点:

  1. 默认情况下对象之间的直接赋值都是浅拷贝
  2. 默认情况下一个对象的属性如果是基本数据类型,那么都是深拷贝
  3. 如果对象的属性包含了引用数据类型, 才真正的区分深拷贝和浅拷贝

时间对象

  • 创建时间对象
var date = new Date();
  • 注意点:如果通过逐个传入参数的方式指定月份, 会出现误差1
  • 月份在JS中的Date对象中是从0开始的
var date1 = new Date(2019, 5, 4, 18, 52, 55);
console.log(date1); //Tue Jun 04 2019 18:52:55 GMT+0800 (中国标准时间)
var date2 = new Date("2019-5-4 18:52:55");//
console.log(date2); //Sat May 04 2019 18:52:55 GMT+0800 (中国标准时间)
  • 获取当前时间距离1970年1月1日相差的毫秒
var date3 = Date.now();
  • 不同方法在不同浏览器输出的格式不同
console.log(date.toTimeString());
console.log(date.toLocaleTimeString());
console.log(date.toDateString());
console.log(date.toLocaleDateString());
  • 时间格式化
    var date = new Date();
    function formatDate(date) {
        var arr = [];
        arr.push(date.getFullYear());
        arr.push("-");
        arr.push(date.getMonth() + 1);
        arr.push("-");
        arr.push(date.getDay());
        arr.push(" ");
        arr.push(date.getHours());
        arr.push(":");
        arr.push(date.getMinutes());
        arr.push(":");
        arr.push(date.getSeconds());
        return arr.join("");
    }
    var res = formatDate(date);
    console.log(res);

Math对象

  • Math是一个对象
  • Array/String/Date是内置构造函数
  • 常用方法:
    Math.PI; //圆周率
    Math.floor()  //向下取整
    Math.ceil()   // 向上取整
    Math.round()  //四舍五入
    Math.abs()    //绝对器
    Math.random() //生成随机数

    var num = Math.PI;
    console.log(num);//3.141592653589793
    var num1 = Math.floor(num);
    console.log(num1);//3
    var num2 = Math.ceil(num);
    console.log(num2);//4
    var num3 = Math.round(num);
    console.log(num3);//3
    var num4 = -1;
    var num5 = Math.abs(num4);
    console.log(num5);//1
    var num6 = Math.random();
    console.log(num6);
  • 练习:生成1-10的随机数(==MDN文档里有==)(并不安全)
    function getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
    }
    var res = getRandomIntInclusive(1, 10);
    console.log(res);
  • 补充:安全的随机数
    var array = new Uint8Array(1);
    window.crypto.getRandomValues(array);

    console.log("Your lucky numbers:");
    for (var i = 0; i < array.length; i++) {
        console.log(array[i]);
    }

你可能感兴趣的:(JavaScript面向对象)

  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • Python快速入门 —— 第三节：类与对象 孤华暗香 Python快速入门python开发语言
    第三节：类与对象目标：了解面向对象编程的基础概念，并学会如何定义类和创建对象。内容：类与对象：定义类：class关键字。类的构造函数：__init__()。类的属性和方法。对象的创建与使用。示例：classStudent:def__init__(self,name,age,major):self.name&#
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 一文掌握python面向对象魔术方法（二） 程序员neil pythonpython开发语言
    接上篇：一文掌握python面向对象魔术方法（一）-CSDN博客目录六、迭代和序列化：1、__iter__(self):定义迭代器，使得类可以被for循环迭代。2、__getitem__(self,key):定义索引操作，如obj[key]。3、__setitem__(self,key,value):定义赋值操作，如obj[key]=value。4、__delitem__(self,key):定义
  • 系统架构设计师 需求分析篇二 AmHardy 软件架构设计师系统架构需求分析面向对象分析分析模型UML和SysML
    面向对象分析方法1.用例模型构建用例模型一般需要经历4个阶段：识别参与者：识别与系统交互的所有事物。合并需求获得用例：将需求分配给予其相关的参与者。细化用例描述：详细描述每个用例的功能。调整用例模型：优化用例之间的关系和结构，前三个阶段是必需的。2.用例图的三元素参与者：使用系统的用户或其他外部系统和设备。用例：系统所提供的服务。通信关联：参与者和用例之间的关系，或用例与用例之间的关系。3.识别参
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • C++ lambda闭包消除类成员变量 barbyQAQ c++c++java算法
    原文链接：https://blog.csdn.net/qq_51470638/article/details/142151502一、背景在面向对象编程时，常常要添加类成员变量。然而类成员一旦多了之后，也会带来干扰。拿到一个类，一看成员变量好几十个，就问你怕不怕？二、解决思路可以借助函数式编程思想，来消除一些不必要的类成员变量。三、实例举个例子：classClassA{public:...intfu
  • 【2022 CCF 非专业级别软件能力认证第一轮（CSP-J1）入门级 C++语言试题及解析】 汉子萌萌哒 CCFnoi算法数据结构c++
    一、单项选择题(共15题，每题2分，共计30分；每题有且仅有一个正确选项)1.以下哪种功能没有涉及C++语言的面向对象特性支持：()。A.C++中调用printf函数B.C++中调用用户定义的类成员函数C.C++中构造一个class或structD.C++中构造来源于同一基类的多个派生类题目解析【解析】正确答案:AC++基础知识，面向对象和类有关，类又涉及父类、子类、继承、派生等关系，printf
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • Python编程 - 初识面向对象 易辰君 Python核心编程python开发语言
    目录前言一、面向对象二、类和对象（一）类简介定义类（二）对象简介创建对象（三）总结三、实例属性和实例方法（一）实例属性创建的基本语法使用示例（二）实例方法定义实例方法的基本语法调用示例方法的示例（三）总结四、类中的self（一）基本概念（二）作用访问实例属性调用其他实例方法在构造函数中初始化对象（三）总结五、__init__方法（一）__init__方法的特点（二）基本语法（三）示例（四）总结前言
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • python中文版软件下载-Python中文版 编程大乐趣
    python中文版是一种面向对象的解释型计算机程序设计语言。python中文版官网面向对象编程，拥有高效的高级数据结构和简单而有效的方法，其优雅的语法、动态类型、以及天然的解释能力，让它成为理想的语言。软件功能强大，简单易学，可以帮助用户快速编写代码，而且代码运行速度非常快，几乎可以支持所有的操作系统，实用性真的超高的。python中文版软件介绍：python中文版的解释器及其扩展标准库的源码和编
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 开发游戏的学习规划 杰克逊的日记 游戏学习
    第一阶段：●C#语言快速系统地学习一遍（基础的语法、面向对象、基础的数据结构、基础的设计模式）●Unity的2D和3D部分及UI、动画、物理系统●阶段性测验：需要去用前面所学的这些基础知识来完成一个简单的2d或者3d的案例，将通过一个自制的《Flappybird》游戏案例讲解游戏开发的思想及方法，并将《Flappybird》这个游戏进一步改造成一个横版射击类游戏《Crazybird》以巩固并且升华
  • ruby和python哪个好学 hakesashou python基础知识rubypython开发语言
    Ruby和python都挺好学的。建议学习Python，语法的话，Python相对更简洁。而且Python应用场合更广泛，运维、网站开发、数据处理、科学研究都可以。Ruby和Python十分相似，有很多共同点，但也有一些不同之外，以下是Python和Ruby的对比：1、Python和Ruby都是面向对象的语言，都是动态和灵活的。二者的主要区别在于他们解决问题的方式。Ruby提供了不同的方法，而Py
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • web前段跨域nginx代理配置 刘正强 nginxcmsWeb
    nginx代理配置可参考server部分 server {         listen       80;         server_name  localhost;
  • spring学习笔记 caoyong spring
    一、概述     a>、核心技术 : IOC与AOP b>、开发为什么需要面向接口而不是实现     接口降低一个组件与整个系统的藕合程度，当该组件不满足系统需求时，可以很容易的将该组件从系统中替换掉，而不会对整个系统产生大的影响 c>、面向接口编口编程的难点在于如何对接口进行初始化,(使用工厂设计模式)
  • Eclipse打开workspace提示工作空间不可用 0624chenhong eclipse
    做项目的时候，难免会用到整个团队的代码，或者上一任同事创建的workspace， 1.电脑切换账号后，Eclipse打开时，会提示Eclipse对应的目录锁定，无法访问，根据提示，找到对应目录，G:\eclipse\configuration\org.eclipse.osgi\.manager，其中文件.fileTableLock提示被锁定。 解决办法，删掉.fileTableLock文件，重
  • Javascript 面向对面写法的必要性？ 一炮送你回车库 JavaScript
    现在Javascript面向对象的方式来写页面很流行，什么纯javascript的mvc框架都出来了：ember 这是javascript层的mvc框架哦,不是j2ee的mvc框架   我想说的是，javascript本来就不是一门面向对象的语言，用它写出来的面向对象的程序，本身就有些别扭，很多人提到js的面向对象首先提的是：复用性。那么我请问你写的js里有多少是可以复用的，用fu
  • js array对象的迭代方法 换个号韩国红果果 array
    1.forEach 该方法接受一个函数作为参数， 对数组中的每个元素 使用该函数  return 语句失效 function square(num) { print(num, num * num); } var nums = [1,2,3,4,5,6,7,8,9,10]; nums.forEach(square); 2.every 该方法接受一个返回值为布尔类型
  • 对Hibernate缓存机制的理解 归来朝歌 session一级缓存对象持久化
    在hibernate中session一级缓存机制中，有这么一种情况： 问题描述：我需要new一个对象，对它的几个字段赋值，但是有一些属性并没有进行赋值，然后调用 session.save()方法，在提交事务后，会出现这样的情况： 1：在数据库中有默认属性的字段的值为空 2：既然是持久化对象，为什么在最后对象拿不到默认属性的值？ 通过调试后解决方案如下： 对于问题一，如你在数据库里设置了
  • WebService调用错误合集 darkranger webservice
     Java.Lang.NoClassDefFoundError: Org/Apache/Commons/Discovery/Tools/DiscoverSingleton 调用接口出错， 一个简单的WebService import org.apache.axis.client.Call;import org.apache.axis.client.Service; 首先必不可
  • JSP和Servlet的中文乱码处理 aijuans Java Web
    JSP和Servlet的中文乱码处理 前几天学习了JSP和Servlet中有关中文乱码的一些问题，写成了博客，今天进行更新一下。应该是可以解决日常的乱码问题了。现在作以下总结希望对需要的人有所帮助。我也是刚学，所以有不足之处希望谅解。 一、表单提交时出现乱码： 在进行表单提交的时候，经常提交一些中文，自然就避免不了出现中文乱码的情况，对于表单来说有两种提交方式：get和post提交方式。所以
  • 面试经典六问 atongyeye 工作面试
    题记：因为我不善沟通，所以在面试中经常碰壁，看了网上太多面试宝典，基本上不太靠谱。只好自己总结，并试着根据最近工作情况完成个人答案。以备不时之需。 以下是人事了解应聘者情况的最典型的六个问题： 1 简单自我介绍 关于这个问题，主要为了弄清两件事，一是了解应聘者的背景，二是应聘者将这些背景信息组织成合适语言的能力。 我的回答：(针对技术面试回答，如果是人事面试，可以就掌
  • contentResolver.query()参数详解 百合不是茶 androidquery()详解
    收藏csdn的博客,介绍的比较详细,新手值得一看 1.获取联系人姓名 一个简单的例子，这个函数获取设备上所有的联系人ID和联系人NAME。 [java]  view plain copy   public void fetchAllContacts() {      
  • ora-00054:resource busy and acquire with nowait specified解决方法 bijian1013 oracle数据库killnowait
            当某个数据库用户在数据库中插入、更新、删除一个表的数据，或者增加一个表的主键时或者表的索引时，常常会出现ora-00054:resource busy and acquire with nowait specified这样的错误。主要是因为有事务正在执行（或者事务已经被锁），所有导致执行不成功。 1.下面的语句
  • web 开发乱码 征客丶 springWeb
    以下前端都是 utf-8 字符集编码 一、后台接收 1.1、 get 请求乱码 get 请求中，请求参数在请求头中； 乱码解决方法： a、通过在web 服务器中配置编码格式：tomcat 中，在 Connector 中添加URIEncoding="UTF-8"； 1.2、post 请求乱码 post 请求中，请求参数分两部份， 1.2.1、url？参数，
  • 【Spark十六】： Spark SQL第二部分数据源和注册表的几种方式 bit1129 spark
    Spark SQL数据源和表的Schema case class apply schema parquet json JSON数据源 准备源数据 {"name":"Jack", "age": 12, "addr":{"city":"beijing&
  • JVM学习之:调优总结 -Xms -Xmx -Xmn -Xss BlueSkator -Xss-Xmn-Xms-Xmx
      堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。典型设置： java -Xmx355
  • jqGrid 各种参数 详解(转帖) BreakingBad jqGrid
      jqGrid 各种参数 详解 分类：  源代码分享  个人随笔请勿参考  解决开发问题 2012-05-09 20:29   84282人阅读   评论(22)   收藏   举报 jquery 服务器 parameters function ajax string  
  • 读《研磨设计模式》-代码笔记-代理模式-Proxy bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflect.Proxy; /* * 下面
  • 应用升级iOS8中遇到的一些问题 chenhbc ios8升级iOS8
    1、很奇怪的问题，登录界面，有一个判断，如果不存在某个值，则跳转到设置界面，ios8之前的系统都可以正常跳转，iOS8中代码已经执行到下一个界面了，但界面并没有跳转过去，而且这个值如果设置过的话，也是可以正常跳转过去的，这个问题纠结了两天多，之前的判断我是在 -(void)viewWillAppear:(BOOL)animated  中写的，最终的解决办法是把判断写在 -(void
  • 工作流与自组织的关系？ comsci 设计模式工作
      目前的工作流系统中的节点及其相互之间的连接是事先根据管理的实际需要而绘制好的，这种固定的模式在实际的运用中会受到很多限制，特别是节点之间的依存关系是固定的，节点的处理不考虑到流程整体的运行情况，细节和整体间的关系是脱节的，那么我们提出一个新的观点，一个流程是否可以通过节点的自组织运动来自动生成呢？这种流程有什么实际意义呢？   这里有篇论文，摘要是：“针对网格中的服务
  • Oracle11.2新特性之INSERT提示IGNORE_ROW_ON_DUPKEY_INDEX daizj oracle
    insert提示IGNORE_ROW_ON_DUPKEY_INDEX 转自：http://space.itpub.net/18922393/viewspace-752123 在 insert into tablea ...select * from tableb中，如果存在唯一约束，会导致整个insert操作失败。使用IGNORE_ROW_ON_DUPKEY_INDEX提示，会忽略唯一
  • 二叉树:堆 dieslrae 二叉树
        这里说的堆其实是一个完全二叉树,每个节点都不小于自己的子节点,不要跟jvm的堆搞混了.由于是完全二叉树,可以用数组来构建.用数组构建树的规则很简单:     一个节点的父节点下标为: (当前下标 - 1)/2     一个节点的左节点下标为: 当前下标 * 2 + 1   &
  • C语言学习八结构体 dcj3sjt126com c
    为什么需要结构体，看代码 # include <stdio.h> struct Student //定义一个学生类型，里面有age, score, sex, 然后可以定义这个类型的变量 { int age; float score; char sex; } int main(void) { struct Student st = {80, 66.6,
  • centos安装golang dcj3sjt126com centos
    #在国内镜像下载二进制包 wget -c  http://www.golangtc.com/static/go/go1.4.1.linux-amd64.tar.gz tar -C /usr/local -xzf go1.4.1.linux-amd64.tar.gz   #把golang的bin目录加入全局环境变量 cat >>/etc/profile<
  • 10.性能优化-监控-MySQL慢查询 frank1234 性能优化MySQL慢查询
    1.记录慢查询配置 show variables where variable_name like 'slow%' ; --查看默认日志路径 查询结果：--不用的机器可能不同 slow_query_log_file=/var/lib/mysql/centos-slow.log 修改mysqld配置文件：/usr /my.cnf[一般在/etc/my.cnf，本机在/user/my.cn
  • Java父类取得子类类名 happyqing javathis父类子类类名
      在继承关系中，不管父类还是子类，这些类里面的this都代表了最终new出来的那个类的实例对象，所以在父类中你可以用this获取到子类的信息！   package com.urthinker.module.test; import org.junit.Test; abstract class BaseDao<T> { public void
  • Spring3.2新注解@ControllerAdvice jinnianshilongnian @Controller
    @ControllerAdvice，是spring3.2提供的新注解，从名字上可以看出大体意思是控制器增强。让我们先看看@ControllerAdvice的实现：   @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Component public @interface Co
  • Java spring mvc多数据源配置 liuxihope spring
    转自：http://www.itpub.net/thread-1906608-1-1.html 1、首先配置两个数据库 <bean id="dataSourceA" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close&quo
  • 第12章 Ajax（下） onestopweb Ajax
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • BW / Universe Mappings blueoxygen BO
      BW Element OLAP Universe Element Cube  Dimension Class Charateristic A class with dimension and detail objects (Detail objects for key and desription) Hi
  • Java开发熟手该当心的11个错误 tomcat_oracle java多线程工作单元测试
    #1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收 测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目 可以在属性文件中配置，那么使它成为
  • 推行国产操作系统的优劣 yananay windowslinux国产操作系统
    最近刮起了一股风，就是去“国外货”。从应用程序开始，到基础的系统，数据库，现在已经刮到操作系统了。原因就是“棱镜计划”，使我们终于认识到了国外货的危害，开始重视起了信息安全。操作系统是计算机的灵魂。既然是灵魂，为了信息安全，那我们就自然要使用和推行国货。可是，一味地推行，是否就一定正确呢？ 先说说信息安全。其实从很早以来大家就在讨论信息安全。很多年以前，就据传某世界级的网络设备制造商生产的交
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他