前端笔记7-js3
2024-09-06 17:20:24
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);
最新文章
- 常见类型，isset(),empty()判断
- IOS第二天多线程-02一次性代码
- [转载] 散列表(Hash Table)从理论到实用（上）
- javascript学习第二课
- bzoj 2326: [HNOI2011]数学作业
- Jmeter笔记2：参数化（五种方法）
- 看来是要改用Gecko的节奏，放弃Awesomium吧
- delegate 为什么用 weak属性
- js 人工获取年月日
- AIX 配置vncserver
- Eclipse&Spring开发开发环境配置
- JAVA程序猿怎么才干高速查找到学习资料？
- WordPress插件制作教程(四): 将数据保存到数据库
- 1207.1——C语言 函数
- CSS样式渐变写法
- mysql 打开远程服务
- 1660: [Usaco2006 Nov]Bad Hair Day 乱发节
- 【编程技巧】applicationContext.xml 里面可配置bean和数据库地址
- poj 3278 简单BFS
- ubuntu自动登录tty1(shell,text)配置