05-JS基础-对象

2018-05-15  本文已影响0人  xiaohan_zhang

JavaScript的对象是一种带有属性和方法的特殊数据类型，它由若干键值对组成。

var obj = {
    name: '漩涡鸣人',
    age: 17,
    gender: '男',
    hometown: '火之国 木叶村'
};
创建对象
  1. 对象初始化器
var obj = {
    name: '漩涡鸣人',
    age: 17,
    gender: '男',
    hometown: '火之国 木叶村',
    run:function () {
        alert("跑步");
    }
};
  1. 构造函数
var obj = new Object();
obj.name = "xiaolan";
obj.age = 17;

function ninja(name, gender, hometown) {
    this.name = name;
    this.gender = gender;
    this.hometown = hometown;

    function work() {
        alert("暗杀");
    }
}

var ninja = new ninja("旗木卡卡西", "男", "木叶村");
属性名和属性值

向对象中添加属性:
对象.属性名 = 属性值;
对象["属性名"] = 属性值;

读取对象中的属性:
对象.属性名
对象["属性名"]

如果读取一个对象中没有的属性，它不会报错，而是返回一个undefined。

删除对象中的属性:
delete 对象.属性名
delete 对象["属性名"]

检查对象中是否含有指定属性：
"属性名" in 对象

如果在对象中含有该属性，则返回true，如果没有则返回false。

对象的属性名不强制要求遵守标志符规范，但使用时还是尽量按标识符规范来写。
如果要使用特殊的属性名，需要采用 对象[] = 属性值 格式，存取都需要这种格式。

// 格式一
obj.name = "xiaoming";
var res = obj.name;
// 格式二
obj ["name"] = "test";
var res1 = obj ["name"];

// 检查obj中是否包含"name"属性
if ("name" in obj){
}

var a = 10;
var b = a;
b = 20;
console.log(a); // 10值
/*
* b获取的是a值得一份拷贝，虽然，两个变量的值相等，但是两个变量保存了两个不同的基本数据类型值。
* b保存了a复制的一个副本。所以，b的改变，对a没有影响。同样a改变，对b也没有影响。　
*/
基本数据类型赋值的过程 
var obj1 = new Object();
var obj2 = obj1;
obj2.name = "xiaobai";
console.log(obj1.name); // xiaobai
/*
* 这两个引用数据类型指向了同一个堆内存对象。
* obj1赋值给pbj2，实际上这个堆内存对象在栈内存的引用地址复制了一份给了obj2.
* 实际上他们共同指向了同一个堆内存对象。实际上改变的是堆内存对象。
* */
引用数据类型赋值过程
函数

函数是由一连串的子程序(语句的集合)所组成的，可以 被外部程序调用。向函数传递参数之后，函数可以返回一 定的值。
函数也是一个对象，也具有普通对象的功能。
函数中可以封装一些代码，在需要的时候可以去调用函数来执行这些代码。
使用typeof检查一个函数时会返回function。

  1. 构造函数（一般不用）
var work = new Function(
    "console.log('工作');"
);
  1. 函数声明
// [] 表示可选，函数可以没有参数
function 函数名([形参1,形参2...形参N]){
    语句...
}
  1. 函数表达式
var 函数名 = function([形参1,形参2...形参N]){
    语句...
};

语法：函数对象([实参1,实参2...实参N]);

当我们调用函数时，函数中封装的代码会按照编写的顺序执行。

function personInfo(info) {
    console.log(info);
}

var person = {
    name : "Conan",
    age : 16,
    address : "Tykyo"
}

this.personInfo(person); // {name: "Conan", age: 16, address: "Tykyo"}

// 将匿名函数作为实参，传递给一个函数
function fun(a) {
    a(); 
}
this.fun(function () {
    console.log("匿名函数实参");
});

function sum(a, b) {
    var sum = a + b;
    console.log(a + " + " + b + " = " + sum);
    return sum;
}
function fun(f, a, b) {
    f(a, b);
}
this.fun1(sum, 2, 8); // 2 + 8 = 10

语法：return 值;

function sum(a, b) {
    var sum = a + b;
    return sum;
}
console.log("return = " + this.sum(3, 8)); // 11

return后边的代码都不会执行，一旦执行到return语句时，函数将会立刻退出。
return后可以跟任意类型的值，可以是基本数据类型，也可以是一个对象。
如果return后不跟值，或者是不写return则函数默认返回undefined。

(function() {
    console.log("立即执行函数");
})();

(function(a,b) {
    console.log("a = " + a);
    console.log("b = " + b);
})(10,11);

调用格式：对象.方法名();

var obj = new Object();
obj.name = "xiaobai";
obj.sayHi = function () {
    console.log("xiaobai hello");
};

console.log(obj.sayHi);
obj.sayHi();

var obj2 = {
    name: "xiaoli",
    sayHi: function () {
        console.log("xiaoli hello");
    }
};
obj2.sayHi();

function fun5() {
    console.log(this.name);
}

fun5.call();
fun5.call(obj1); // xiaolan
fun5.call(obj2); // xiaobai
// fun5.apply();

function fun6(a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
}

fun6.call(null,2,4);
fun6.apply(null, [3,6]);

function fun7() {
    console.log(arguments);
    console.log(arguments.callee); // 正在执行的函数对象，即fun7
}
fun7(); // Arguments []
fun7("hi", 1); // Arguments ["hi", 1]
作用域

作用域简单来说就是一个变量的作用范围。

console.log("a = " + a); // undefined
console.log("b = " + b); // Can't find variable: b

var a = 123;
b = 111;

fun1(); // "函数声明"
fun2(); // fun2 is not a function.

function fun1() {
    console.log("函数声明");
}

var fun2 = function () {
    console.log("函数表达式");
}
this（上下文对象）

我们每次调用函数时，解析器都会将一个上下文对象作为隐含的参数传递进函数。
使用this来引用上下文对象，根据函数的调用形式不同，this的值也不同。
this的不同的情况：
1.以函数的形式调用时，this是window
2.以方法的形式调用时，this就是调用方法的对象
3.以构造函数的形式调用时，this就是新创建的对象

function fun3() {
    console.log(this);
}

var obj3 = {
    name: "Naruto",
    sayName: fun3
};

fun3(); // Window {personInfo: function, fun1: function, …}
obj3.sayName(); // Object:{name: "Naruto", sayName: function}
构造函数

1）构造函数是专门用来创建对象的函数。
2）一个构造函数我们也可以称为一个类。
3）通过一个构造函数创建的对象，我们称该对象是这个构造函数的实例。
4）通过同一个构造函数创建的对象，我们称为一类对象。
5）构造函数就是一个普通的函数，只是他的调用方式不同:
  如果直接调用，它就是一个普通函数
  如果使用new来调用，则它就是一个构造函数

function Person(name, age) {
    this.name = name;
    this.age = age;
}

function Dog(name, age) {
    this.name = name
    this.age = 2;
}

var p = new Person("Luffy", 17);
var d = new Dog("旺财", 2);
console.log(p); // Person {name: "Luffy", age: 17}
console.log(d); // Dog {name: "旺财", age: 2}

语法：对象 instanceof 构造函数

// 如果该对象是构造函数的实例，则返回true，否则返回false。
console.log(p instanceof Person); // true

Object是所有对象的祖先，所以任何对象和Object做instanceof都会返回true。

语法：
for (var 变量 in 对象){
}

var obj = new Object();
obj.name = "xiaobai";
obj.age = 11;
obj.address = "Beijing";

for (var attr in obj) {
    console.log(attr + " = " + obj[attr]); // attr为obj中的属性名,obj[attr]为该属性对应的属性值
}
原型 prototype

创建一个函数以后，解析器都会默认在函数中添加一个prototype属性。
prototype属性指向的是一个对象，这个对象我们称为原型对象。
当函数作为构造函数使用，它所创建的对象中都会有一个隐含的属性执行该原型对象。
这个隐含的属性可以通过对象.__proto__来访问。


prototype属性 
function MyClass(){

}
MyClass.prototype.test = 666;
MyClass.prototype.work = function () {
    console.log("工作");
};

var mc = new MyClass();
console.log(MyClass.prototype); // MyClass {}
console.log(mc.__proto__);      // MyClass {}
console.log(mc.test);
mc.work();

原型对象就相当于一个公共的区域，凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象。
我们可以将对象中共有的属性和方法统一添加到原型对象中，这样我们只需要添加一次，就可以使所有的对象都可以使用。

当我们去访问对象的一个属性或调用对象的一个方法时，它会先自身中寻找，如果在自身中找到了，则直接使用。如果没有找到，则去原型对象中寻找，如果找到了则使用，如果没有找到，则去原型的原型中寻找，依此类推。直到找到Object的原型为止，Object的原型的原型为null，如果依然没有找到则返回undefined。

语法：对象.hasOwnProperty("属性名")

使用 in 检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true。

console.log("test" in mc); // true
console.log(mc.hasOwnProperty("test")); // false
上一篇下一篇

猜你喜欢

热点阅读