javascript基础-js对象

 

1、js对象的建立

 

1.普通最简单的方式

var teacher = new Object( ); teacher.name = "zhangsan"; teacher.age = 35; teacher.job = "教师"; teacher.say = function( ) {     return this.name + this.age + this.job;        //this表明的是teacher下的做用域
}; console.log(teacher.say( ));

 

2.对象初始化（单体方式）-json格式，不适合多个对象

var json = {name:"张三", age:15, sex:1, show:function( ){alert(this.name+this.age+this.sex)},}; var person = {     name : "张三",     age : 25,     say : function ( ) {         return "我是张三";        },     action : function( ) {         return "正在学习关于js高级应用...";        }, }; console.log(person.name +" "+ person.age); console.log(person.say() +" "+ person.action());

 

3.构造函数建立

function Student(_name, _age) {     this.name = _name;     this.age = _age;     this.say = function( ) {         return "我是"+this.name+"，我今年"+this.age+"岁了。";        }        this.action = function( ) {         return "正在动手操做js高级应用...";        } } var student = new Student("李四", 22); console.log(student.say( )+" "+student.action( ));

 

4.工厂模式

function createObject(_name, _age){     var obj = new Object();    //私有对象obj，所以是没法通new方法
    obj.name = _name;     obj.age = _age;     obj.run = function( ) {         return this.name + this.age;     };     return obj;        //返回对象的引用（返回的类型为Object类型） 
} var obj1 = createObject("tom", 25); var obj2 = createObject("jack", 30); console.log(obj1.run()); console.log(obj2.run());

 

 

 

2、js对象的方法

 

 对象的方法也能够划分为 私有方法、对象方法、类方法

function Person( ) {     //对象方法
    this.getUsername = function( ) {         return "admin";     }     //私有方法
    var getPassword = function( ) {         return "123456";     }     //调用私有方法
    console.log("密码："+getPassword( ));     //对象方法
    Person.prototype.getAge = function( ) {         return 25;     } } //对象方法
Person.prototype.getName = function( ) {      return "admin" ; } Person.prototype = {      start : function( ) {           return "start";      },      end : function( ) {           return "end";      } } //类方法
Person.getCountry = function( ) {     return "China"; } var p = new Person( ); console.log("用户名："+p.getUsername( )); console.log("年龄："+p.getAge( )); console.log(Person.getCountry( ));

 

 

 

两种写法的对比

 方式一：

function Student() {     this.name = "cxb";     this.talk = function() {         return "我叫" + this.name;     } } var stu1 = new Student(); var stu2 = new Student();

 

 方式二：

function Student() {     this.name = "cxb"; } Student.prototype.talk = function() {     return "我叫" + this.name; } var stu1 = new Student(); var stu2 = new Student();

 方式一与方式二产生的结构几乎是同样的，而本质区别就是：方式二new产生的二个实例对象共享了原型的talk方法，这样的好处节省了内存空间，方式一则是要为每个实例复制talk方法，每一个方法属性都占用必定的内存的空间，因此若是把全部属性方法都声明在构造函数中，就会无形的增大不少开销，这些实例化的对象的属性如出一辙，都是对this的引用来处理。除此以外方式一的全部方法都是拷贝到当前实例对象上。方式二则是要经过scope链接到原型链上查找，这样就无形之中要多一层做用域链的查找了。

 

注：prototype方式的位置不能随意互换

function Person() { } // 位置一
Person.prototype = { walk : function() { console.log("walk") }, run : function() { console.log("run") } } // 位置二
Person.prototype.talk = function() { console.log("talk") } var p = new Person(); p.talk() console.log(Person.prototype) 

 

若是位置一和位置二调换，p.talk()异常  Uncaught TypeError: p.talk is not a function

console.log(Person.prototype)  打印信息以下：

 

若是位置一和位置二调换，会少一个原型链方法

 

 

 

3、js对象的属性

 

js对象的属性也能够划分为：对象属性、私有属性、类属性

function User( ) {     this.username = "admin";     //对象属性
    var password = "123456";    //私有属性
    this.getPassword = function(){         return password;    //获取私有属性的方法
    }     User.prototype.age = 25;    //对象属性
} User.country = "China";        //类属性
var user = new User( ); console.log("用户名："+user.username); console.log("密码："+user.getPassword( )); console.log("年龄："+user.age); console.log("国籍："+User.country); //length属性
function box(name, age){     return name+age; } console.log(box.length);        //返回box中的参数个数
console.log(User.length);

 

 

 

 

 

4、js对象的引用

 

对象的引用其实就是将一个对象赋值给另外一个对象的过程

var a = 123; var b = a; a = "张三"; console.log("a的值："+ a);    //将打印张三
console.log("b的值："+ b);    //将打印123

var x = 240; var y = x; x = 320; console.log("x="+ x); console.log("y="+ y); var array1 = [1,2,3]; var array2 = array1; array2.push(4);        //array1.push(5);结果同样
console.log("array1:"+ array1); console.log("array2:"+ array2); var arr1 = [1,2,3]; var arr2 = []; arr2 = arr1; arr2.push(4); console.log(arr1);    //显示1,2,3,4
console.log(arr2);    //显示1,2,3,4

 

 

 

 

5、命名空间

使用命名空间能够解决同名函数冲突问题及防止变量的污染，命名空间采用JSON方式

var com = { }; com.bj = { }; com.sh = { }; com.hz = { }; com.bj.get = function( ) {     console.log("北京"); } com.sh.get = function( ) {     console.log("上海"); } com.hz.get = function( ) {     console.log("杭州"); } com.bj.get( ); com.sh.get( ); com.hz.get( );

 

 

 

6、this关键字

 

1.普通最简单的方式 

//当全局做用域调用函数时，this对象引用的就是window //this指代的是当前的方法属于谁 或 当前发生事件的对象 //window是一个对象，并且是js中最大的对象，是最外围的对象
console.log(window);                   //输出：[object Window]
console.log(typeof window);        //输出object object类型
console.log(this);                          //输出：[object Window] this目前表示的是window，由于是在window范围下
console.log(typeof this);              //输出object object类型 //上面的this就是window

var color = "红色的";                 //这里的color是全局变量，而这个变量又是window的属性
console.log(window.color);        //输出：红色的
console.log(this.color);              //输出：红色的
 window.color = "红色的";            //至关于    var color="红色的";
console.log(this.color); var box = {     color:"蓝色的",                           //这里的color是box下的属性
    showColor : function( ) {         alert("box："+this.color);        //这里的this.color，表明的是box下的color
    }    }

 

 

//例：全局的方法属于window对象下的
function show(){     alert("show()："+this.color );        //这里的this.color，其实仍是在window下,这里执行的是动态的，第一次在window下，第二次在box2下
} //其实上一种写法等同于：window.show=function(){...}  即这里的 show()方法属于window对象的
alert(" "+this.color); box.showColor( ); show( ); // var box2 = {     color:"黄色的",    } box2.showColor = show;    //这段代码至关于以下：
box2.showColor( ); /* var box2 = {     color:"黄色的",     showColor:function( ) {         alert("box："+this.color);     }        } */

//例：
var array = [1, 2, 3, 4]; array.a = 20; array.getA = function( ) {     console.log(this.a);    //这里的this表明array对象
} var oDiv = document.getElementById("box"); oDiv.onclick = function( ) {     console.log(this);        //这里的this表明oDiv对象   
}

 

 

 

7、内置对象

 

1.URI编码方法 功能：字符串解析。功能很是强大，但也很是危险。

var name = "//Lee李"; var a = encodeURI(name); var b = encodeURIComponent(name); console.log(name); console.log(a);            //只对中文进行编码
console.log(b);           //对全部进行编码（中文及特殊字符） //解码
console.log(decodeURI(a)); console.log(decodeURIComponent(b));

 

2.eval方法

eval("var num = 100"); console.log(num); //字符串"var num = 100",其实就是一段javascript代码，eval会把这个字符串解析成javascript
eval("console.log(250)"); console.log(eval("console.log(250)"));     //打印出250及undefined（先执行里面的打印）
 eval("function show( ){return 666;}"); console.log(show( ));

 

3.global 

//alert(Global);
var box = "Lee"; console.log(window.box);
console.log(Object); //返回一个构造函数

 

• Global对象没法直接访问
• Global对象内置属性和方法
• Global对象的属性：undefined、NaN、Object、Array、Function等。