前端笔记7-js3

1.方法:

//创建一个对象
var obj = {name:"孙悟空",age:18};

//对象的属性也可以是对象
obj.brother = {name:"猪八戒",age:28};

//console.log(obj.brother.name);

//对象的属性也可以是一个函数
//当一个对象的属性是一个函数时,我们称这个函数是这个对象的方法
//函数和方法只是称呼上的不同,本质上没有区别
obj.sayName = function(){
console.log("Hello 大家好 我是孙悟空~~~");
};

//console.log(obj.sayName);

//当我们调用对象中的函数时,我们称我们在调用对象的方法
//obj.sayName();

var obj2 = {

name:"沙和尚",
age:38,
sayName:function(){
console.log("我是老沙~~~");
}
}

obj2.sayName();

2.作用域:

/*
* 作用域(Scope)
* - 作用域简单来说就是指一个变量的作用的范围
* - 在JS中作用域分成两种:
* 1.全局作用域
* 2.函数作用域
*
* - 全局作用域:
* 1.所有直接在script标签中编写的代码都在全局作用域中
* 2.全局作用域在打开网页时创建,在网页关闭时销毁
* 3.全局作用域中有一个全局对象window,
* window代表的是浏览器的窗口,
* 在全局作用域中创建的变量都会作为window对象的属性保存
* 在全局作用域中创建的函数都会作为window对象的方法保存
* 4.在全局作用域中创建的变量都是全局变量,可以在页面的任意位置访问
*/

var a = 123;
var b = 456;

//console.log(window.b);
//console.log(window.c);

function fun(){
console.log(b);
console.log("我是全局中的函数fun。。。。");
}

fun();

//window.fun();

3.变量的声明提前:

//如果不写var,直接为变量赋值,则相当于为window对象添加属性
//window.a = 10;
//a = 10;

/*
* 变量的声明提前
* - 使用var关键字声明的变量,都会在所有的代码执行之前被声明,但是不会赋值
* 赋值会直到执行到赋值的代码时才执行
* - 如果不适用var关键字声明变量,则不会有声明提前的特性
*
* 函数的声明提前
* - 使用函数声明创建的函数,会在所有的代码执行之前创建,
* 所以我们可以在函数声明前就去调用函数
* - 使用函数表达式创建的函数,没有这个特性,所以不能在它创建之前调用
*/
//console.log("a = "+a);

var a = 10;

//fun();
//console.log(fun2);

//使用函数声明来创建一个函数
function fun(){
console.log("我是fun函数。。。。");
}

//使用函数表达式创建一个函数
var fun2 = function(){
console.log("----->我是fun2.。。。");
};

4.函数的作用域:

/*
* 函数作用域
* - 函数作用域可以理解为是全局中的小的作用域
* - 函数作用域在函数调用时创建,在调用结束时销毁
* 每调用一次函数就会创建一个新的函数作用域
* - 在函数作用域中可以访问到全局变量,
* 而在全局中无法访问到函数作用域中的变量
* 在函数中创建的变量如果不写var,则会变成全局变量
* - 当我们在函数中使用一个变量时,它会先在自身的作用域中寻找,
* 如果有就直接使用,如果没有则去上一级作用域中寻找,
* 找到则使用,没找到则继续寻找,直到找到全局作用域为止
* 如果全局作用域中依然没有,则报错ReferenceError
* - 在函数作用域中也适用变量和函数的声明提前
*
*/

 var a = "全局a";

function fun(){
var a = "--> 函数a";

//如果在函数作用域中想访问全局变量可以通过window对象来访问
console.log(window.a);
}

//fun();
a = 20;

/*
* 在函数内部使用var关键字声明的变量也会被声明提前,
* 它的声明会在所有的代码执行前执行
*
* 在函数内部使用函数声明创建的函数,也会在所有的代码执行之前被创建
*/
function fun2(){

fun3();
//console.log(a);

//var a = 10;

function fun3(){
console.log("我是fun2内部的函数。。。");
}

}

fun2();

5.练习

var a = 123;

function fun(){
alert(a);
a = 456;

}

fun(); //123
alert(a);//456


var a = 123;

/*
* 定义形参就相当于在函数中声明了对应的变量
*/


/*function fun(a) {
alert(a);
a = 456;
}

fun(); //undefined

alert(a); //123*/

var a = 123;

function fun(a) {
alert(a);
a = 456;
}

fun(123); //123

alert(a); //123

 

6.this用法

//创建一个变量name
var name = "全局中的name";

/*
* 每次调用函数时,浏览器都会将一个对象作为隐藏的参数传递进函数
* 这个对象就是函数执行的 上下文对象,我们可以通过this来引用该对象
* 根据函数的调用的形式不同,this的值也不同:
* 1.以函数的形式调用时,this永远都是window
* 2.以方法的形式调用时,谁调用this就是谁
*/


//创建一个函数
function fun(){
/*
* 我们希望谁调用的函数,就可以输出谁的name属性
* window调用时,就输出window.name
* obj 调用时 就输出 obj.name
* obj2 调用时 就输出 obj2.name
*/
console.log(this.name);

//console.log(this == obj);
}

//创建一个对象
var obj = new Object();
obj.name = "孙悟空";
obj.sayName = fun;

//创建一个对象
var obj2 = new Object();
obj2.name = "猪八戒";
obj2.sayName = fun;
//console.log(obj.sayName == fun);
//window.fun();
//obj.sayName();
//obj2.sayName();

//obj.sayName();
//fun();
//obj.sayName();
//fun();

//window.fun();

//obj2.sayName();

var obj3 = {

name:"沙和尚",
age:38,
sayName:function(){

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

test();
}
};

obj3.sayName();

7.使用工厂方法创建对象

/*
* 使用工厂方法来创建对象
*/
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;

}

//调用函数
var person = createPerson("孙悟空",18,"男","花果山");
var person2 = createPerson("白骨精",16,"女","白骨洞");

 

8.使用构造函数创建对象

/*
* 构造函数(constructor)
* 构造函数是专门用来创建对象的函数
* 构造函数就是一个普通的函数,不同的是构造函数需要通过new关键字来调用
* 构造函数一般都是首字母大写
*
* 构造函数的执行的流程:
* 1.创建一个新的对象
* 2.将新创建的对象设置为函数中的this
* 3.逐行执行函数
* 4.将新建的对象作为返回值返回
*
* 如果以构造函数的形式调用,this就是新创建的那个对象
*
* 构造函数我们也可以称它为一个类,
* 使用同一个构造函数创建的对象,我们称为一类对象
* 通过构造函数创建的对象,我们称这个对象是该类的实例
*
*/

//创建一个人类的构造函数
function Person(name , age){
//通过this,向新对象中添加属性
this.name = name;
this.age = age;
this.sayName = function(){
console.log(this.name);
};
}


function Dog(){

}

var p = new Person("孙悟空",18);
var person2 = new Person("沙和尚",38);

var dog = new Dog();


//console.log(person);
//person2.sayName();


var a = new Person();
var b = new Dog();

/*
* instanceof
* - 可以检查一个对象是否是一个类(构造函数)的实例
* - 语法:对象 instanceof 构造函数
*/
//console.log(b instanceof Person);

/*
* 所有的对象都是Object的后代
*/
//console.log(a instanceof Object);


//创建一个人类的构造函数
function Person(name , age){
//通过this,向新对象中添加属性
this.name = name;
this.age = age;

//向新的对象中添加一个sayName()方法
this.sayName = fun;
}
/*
* 在构造函数中我们为每一个对象都添加了一个sayName()方法,
* 而这个方法是在构造函数中创建的,构造函数每执行一次就要创建一个新的sayName()方法
* 每个对象中的sayName()方法都是不同,有几个对象就有几个sayName()
* 但是这些函数的功能又是一摸一样的,所以我们没有必要创造出这么多一摸一样的函数
*/

/*
* 将函数定义到全局作用域中 ,的确可以解决问题,但是将它定义到全局作用域将会导致全局作用域的命名空间被污染。
* 同样也导致我们程序运行不安全
*/
//将函数定义到构造函数的外部
function fun(){
  console.log(this.name);
};



//创建一个Person
var per = new Person("孙悟空",18);
var per2 = new Person("唐僧",16);
var per3 = new Person("玉兔精",16);

//console.log(per.sayName == per2.sayName);
per3.sayName();

9.原型1

/*
* 原型(prototype)
* - 我们每次创建一个函数浏览器都会为函数添加一个属性
* 叫做prototype,这个属性对应的是一个对象
* 这个对象就是我们说的原型对象。
* - 如果以仅仅以函数的形式去调用函数,则原型对象没有任何作用
* - 当以构造函数的形式调用函数时,它所创建的对象中都会有一个隐含的属性
* 执行该函数的原型对象,我们可以通过__proto__来访问这个对象
*
* - 所有的同一类型的对象他们都共享同一个原型对象,这个原型对象就相当于一个公共的区域
* - 当我们去调用一个对象的属性或方法时,它会先去对象自身中寻找,
* 如果找到了则直接使用,如果没找到则去原型对象中寻找,如果原型中有则返回原型中的值
* 如果原型中没有,则去原型的原型中寻找,找到了则直接使用依次类推。。。
* 注意: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);

//mc2.fun();

//创建一个人类的构造函数
function Person(name , age){
//通过this,向新对象中添加属性
this.name = name;
this.age = age;
}

//向Person的原型中添加sayName()
Person.prototype.sayName = function(){
console.log(this.name);
};

var per = new Person("孙悟空",18);
var per2 = new Person("唐僧",16);
var per3 = new Person("玉兔精",16);

per3.sayName();

10.原型2

//创建一个人类的构造函数
function Person(name , age){
//通过this,向新对象中添加属性
this.name = name;
this.age = age;
}

//向Person的原型中添加sayName()
Person.prototype.sayName = function(){
console.log(this.name);
};

//创建一个Person的实例
var per = new Person("孙悟空",18);

//当我们打印一个对象时,控制台往往会输出 [object Object]
//此时实际上输出的内容是对象的toString()方法的返回值
var str = per.toString();
//console.log(str);

//检查per中是否有toString
//如果属性在对象的原型中,使用in也会返回true
//console.log("toString" in per);

//console.log(per.hasOwnProperty("toString")) ;

//console.log(per.__proto__.__proto__.hasOwnProperty("toString"));

//console.log(Object.prototype.__proto__);

//修改per的toString()
/*per.toString = function(){
//return "我是一个可爱的Person" ;
return "Person[name = "+this.name+" ,age = "+this.age+"]";
};*/

//修改Person原型的toString
Person.prototype.toString = function(){
//return "我是一个可爱的Person" ;
return "Person[name = "+this.name+" ,age = "+this.age+"]";
};

var per2 = new Person("白骨精",16);

console.log(per);


猜你喜欢

转载自www.cnblogs.com/liuyi13535496566/p/11986699.html