JavaScript学习笔记整理Day8

 

一.创建相同属性和方法的对象

　　1.原始方法（此种方法重复声明，代码重复量大，不推荐使用）

        var obj1 = {
            username:'小红',
            age:18,
            dothing:function(){
                console.log('方法');
            }
        };
        var obj2 = {
            username:'小黑',
            age:20,
            dothing:function(){
                console.log('方法');
            }
        };
        var obj3 = {
            username:'小白',
            age:48,
            dothing:function(){
                console.log("方法");
            }
        }            

　　2.工程模式

function getObj(uname,age){
            var obj = new Object();    
            obj.username = uname;
            obj.age = age;
            obj.dothing = function(){
                console.log('方法');
            }
            return  obj;    
        }
        var obj1 = getObj('小红',18);
        console.log(obj1);
        var obj2 = getObj('小黑',20);
        console.log(obj2);

　　3.构造函数this--实例化本构造函数的对象（本对象）

function Getobj(uname,age){
            this.username = uname;
            this.age = age;
            this.dothing = function(){
                console.log('方法');
            }
　　　　　　//return this;
        }
        var obj4 = new Getobj('小红',18);
        console.log(obj4);
        var obj5 = new Getobj('小黑',25);
        console.log(obj5);

注：此时的console.log(‘方法’)；this被隐式返回了，因此省略了。

二.构造函数

　　1.相当于别的语言中(class）

　　2.ECMA定义：构造函数是用来新建并同时初始化一个新对象的函数。

三.构造函数的特点：

　　1.每个对象都要有与之相对应的构造函数

　　2.一个构造函数可以有多个对象。

四.构造函数的判断： instanceof   返回true|false

console.log([1,2,3] instanceof String);   //true
console.log([1,2,3] instanceof Array); //false

特殊情况：不能用来判断数字  字符串  布尔直接量

console.log(100 instanceof Number);//fasle
console.log('abc' instanceof String);//false
console.log(true instanceof Boolean); //false

五.构造函数的获取：

　constructor 属性 -- 所有的对象都具有constructor 获取对象的构造函数

function demo(){}; demo的构造函数：demo.constructor;
var num = 10;     num 的构造函数   num.constructor

  数字调用constructor注意事项：

使用10..constructor 
使用(10).constructor

JavaScript中的特殊情况：Number数值在new的时候是一个Object对象，但是正常使用时是number

六.构造函数与普通函数 ：

　　普通函数：

　　　　1.不需要用new关键字调用

　　　　2.可以用return语句返回值

　　　　3.函数内部不建议使用this关键字

　　　　4.函数命名以驼峰方式，首字母小写

　　构造函数：

　　　　1.用new调用关键字

　　　　2.函数内部可以使用this关键字

　　　　3.默认不用return返回值（隐式返回this）

　　　　4.函数命名建议首字母大写，与普通函数区分开

　　　　5.普通函数可以是构造函数的一个方法

 七.对象的引用比较:

　　1.原始类型的数据比较：只是值的比较

　　2.对象类型的比较：需要值和引用地址都相同

//声明一个构造函数
        function People(){
            this.type="人";
            this.eyes='2只眼睛';
            this.say = function(){
                console.log('人有语言');
            }
        }
        //实例化构造函数得到对象
        var man1 = new People();
        var man2 = new People();
        console.log(man1);
        console.log(man2);
        //属性的比较
        console.log(man1.type == man2.type); //true
        console.log(man1.say);
        console.log(man2.say);
        console.log(man1.say == man2.say);  //false
        console.log([1,2,3] == [1,2,3]);   //false
        console.log('abc' == 'abc');   //true

        /*对象类型的比较
            要求地址(引用)相同  值也相同
        */

八.原型  （每个函数function都有一个prototype 即原型）

　　一.原型的特点：

　　　　1.对象的原型prototype让公用的方法或者属性在内存中只存在一份

　　　　2.每个函数在创建的时候都自动添加了prototype属性，这就是函数的原型

　　　　3.prototype是函数的内置属性

　　　　4.原型也是对象

　　　　5.原型是添加在构造函数下面的

　　二.原型中的属性（方法）与对象中的属性（方法）区别

　　　　1.原型属性类似于class 而对象中的属性类似于style

　　　　2.对象属性的优先级高于原形属性的优先级

　　　　3.在没有原型继承的基础上，优先访问自有的属性  然后再访问构造函数内的属性  最后访问原型上的属性  如果都没有返回undefined

　　三.获取原型的方法

　　　　1.先获取对象的构造函数然后再得到原型

 console.log([1,2,3].constructor);
 console.log([1,2,3].constructor.prototype);

　　　　2.使用__proto__     在ECMA5中不是一个标准属性，不推荐使用。

console.log([1,2,3].__proto__);    

　　　　3.ECMA5新方法：Object.getPrototypeOf()

console.log(Object.getPrototypeOf([1,2,3]));

　　四.原型中的this

Array.prototype.unique = function(){
            var newArr = [];
            this.map(function(v){
                if(newArr.indexOf(v) == -1){
                    newArr.push(v);
                }
            })
            return newArr;
        }

        console.log([1,2,3,1,2,3,1,2,3].unique());


function Demo(){
            this.username="二毛";
        }
        //参数二：  对象描述
        Demo.prototype.index = 100;
        var obj5 = Object.create(Demo.prototype,{
            size:{
                value:200
            },
            age:{
                value:12
            }
        });
        console.log(obj5);
        console.log(obj5.index);
        console.log(obj5.username);

九.原型链：

　　　　JavaScritp引擎在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回undefined.

//自定义原型链
        //武器
        function Weapon(){
            this.type = '武器';
            this.issale = '不能卖';
        }
        //剑
        function Sword(){
            this.gjtype='刺';
            this.shouming = 2000;
        } 
        Sword.prototype = new Weapon();
        //倚天剑
        function Yitian(n){
            this.name="倚天剑";
            this.ston = n+"级";
        }
        //继承方式
        Yitian.prototype = new Sword(); 
        var myyt = new Yitian(3);
        console.log(myyt);
        //console.log(myyt.gjtype);
        console.log('这是一把'+myyt.type+','+myyt.issale+',名：'+myyt.name+',耐久：'+myyt.shouming+'，攻击方式'+myyt.gjtype);
        var youryt = new Yitian(2);
        console.log('这是一把'+youryt.type+','+youryt.issale+',名：'+youryt.name+',耐久：'+youryt.shouming+'，攻击方式'+youryt.gjtype);

十.判断自有属性（hasOwnProperty）（返回true|false）

<script>
        var obj = {
            username:'二毛',
            age:12
        }
        Object.prototype.myindex = 10000;
        //判断自有属性 hasOwnProperty 
        console.log(obj.hasOwnProperty('username'));
        console.log(obj.hasOwnProperty('age'));        //true
        console.log(obj.hasOwnProperty(myindex));   //false
        console.log('------------');
        console.log([].hasOwnProperty('length')); //true
        console.log([].myindex); //10000
        console.log([].hasOwnProperty(myindex)); //false
        console.log('------------');
        function Demo(){
            this.show = 'abc';
        }
        Demo.prototype.num = 100;
        var obj1 = new Demo();
        console.log(obj1.num);
        console.log(obj1.hasOwnProperty('num')); //false
        console.log(obj1.hasOwnProperty('show')); //true
    </script>