js进阶一：对象，函数

2020-01-16  本文已影响0人  蘭小木

对象

内建对象

- 内建对象指由ES标准定义的对象，任何对ES标准的实现都可以使用这些对象，不用新建可直接调用对象

比如：Math String Number Boolean RegExp

Math.Pi;
String(200);

宿主对象

- 宿主对象指由JS运行环境为我们提供的对象，目前对于我们来说就是指浏览器为我们提供的对象

自定义对象,由自己定义的对象

创建对象

var obj = new Object();

var obj = {}

var obj2 = {
    name:"孙悟空",
    age:18, 
    address:"花果山",
    //对于特殊的属性名，可以通过双引号引起来
    "123":"hello",                   
    test:{  name:"猪八戒",
        age:28, 
        address:"高老庄"
    }
};

工厂模式创建对象

function createPerson(name , age , gender , address){
            
//创建一个对象
var obj = new Object();
                
//向对象中添加属性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.address = address;
obj.sayName = function(){       console.log("大家好，我是："+this.name);
            };
return obj;
}

对象属性操作

属性值可以是任意的数据类型（String Number Boolean Null Undefined）也可以一个对象

添加/修改属性

对象.属性名 = 属性值 ， 易用, 但有时不能用
obj.name = "孙悟空";
obj.age = 18;
obj.gender = "男";
对象["属性名"] = 属性值 ， 难写, 但更通用
obj["123abc"] = "你好";
var str = "var";
console.log(obj[str]);

删除属性

delete 对象.属性名
delete obj.name;

查看属性

对象.属性名
var gender = obj.gender；
对象["属性名"]
obj["123abc"]

检查对象中是否含有某个属性

"属性名" in 对象
"name" in obj；

对obj中的属性进行枚举

for(变量 in 对象){}

通过这个方法对获取到未知属性名，并获取到属性值,
返回属性名给n 返回的属性名是String类型

for(var n in obj){
    console.log(n + " : " +obj[n]);
}

对象方法

当一个对象的属性是一个函数时，我们称这个函数是这个对象的方法

obj.sayName = function(){
                console.log("Hello 大家好 我是孙悟空~~~");
            };

代码块

{ }

JS中的代码块仅有分组的作用没有其他的作用，代码块中的内容对于代码块外是可见的

函数

函数也是一个对象，具有Object的所有的功能

创建

方式一

function 函数名字(形参1,形参2,...形参n){
语句...
}

function sum(a , b ,c){
        
}
方式二

var 变量 = function(形参1,形参2,...形参n){
语句...
}

var fun2 = function(){
            alert("我是又一个函数");
        };
函数不写return 默认return undifined

注

调用函数

方法一
函数名字(形参1,形参2,...形参n)；
方法二
call() / apply()
var obj2 = {                        
            name : "沙和尚",
            sayName : function(){
                console.log(this.name); 
            }                               
        };          
        name = "window中的name";
        obj2.sayName.call(window);

arguments

回调函数

你定义的,你没有调用,但最终它执行了: 发生了对应了事件或特定时刻(如点击事件)

自调函数

(function(){
})();

构造函数

构造函数就是普通的函数， 构造函数首字母大写
function Person(name , age){
            //通过this，向新对象中添加属性
            this.name = name;
            this.age = age;
            this.sayName = function(){
                console.log(this.name);
            };
        }
创建对象
var dog = new Person();
执行流程
创建一个新的对象
将新创建的对象设置为函数中的this
逐行执行代码
将新建的对象作为返回值返回

prototype原型对象（祖先对象）

属性

constructor

注

注意：Object的原型的原型为null，所以会一直找Object的原型，
如果他里面依然没有，则返回undefined

function MyClass(){
            
        }
        
//向函数的原型对象中添加一个属性
MyClass.prototype.hello = "你好";
        
MyClass.prototype.fun = function(){
alert("我是原型中的fun");
    };
        
//创建MyClass的实例
var mc = new MyClass();
var mc2 = new MyClass();
var mc3 = new MyClass();
        
mc.hello = "mc的你好";
console.log(mc3.__proto__ == MyClass.prototype)
console.log(mc2.hello);
判断方法是否属于对象
per.hasOwnProperty("toString")
显示原型/隐式原型
原型链（隐式原型链）

查找一个对象的属性时，先在基本属性中查找，如果没有，再沿着proto这条链向上找

原型属性问题

对象继承

原型链继承

Student.prototype = new Person()

借用构造函数继承（使用call（）方法）

function Person(name, age) {
    this.name = name
    this.age = age
}
function Student(name, age, price) {
    Person.call(this, name, age)
    this.price = price
}

组合继承(即使用构造函数继承，又使用原型链继承)

this

每次调用函数时，浏览器都会将一个对象作为隐藏的参数传递进函数,这个对象就是函数执行的 上下文对象，我们可以通过this来引用该对象

函数调用方式不同，this的值也不同

作用域

全局作用域

函数作用域

块作用域

ES6的时候才有

作用域链

静态的，在编写代码的时候就确定了变量调用位置

变量声明提前

函数声明提前

堆栈

基本数据类型

引用数据类型

闭包

闭包到底是什么?
闭包的作用
闭包的应用
闭包的缺点及解决
1. 缺点
2. 解决
上一篇下一篇

猜你喜欢

热点阅读