1、函数声明,使用function语句
function print(x,y){
return x*y;
}
2、函数直接量定义函数
var print = function(x,y){
return x*y;
}
3、构造函数方法 new Function();
var print = new Function('a','b','return a+b;');
二、js对象创建
1、对象直接量/字面量
var obj = {
name:'li',
age:18,
sex:'nv'
}
console.log(obj.name); //li
2、构造函数
(1)、系统自带的,eg: new Object(), Array(), Number(),Boolean(), Date()...
var obj = new Object();
obj.name = 'yue';
obj.age = 18;
obj.sex = 'nv';
console.log(obj.name);
(2)、自定义的,为了和普通函数区分,首写字母大些,采用驼峰式写法(普通函数采用小驼峰式写法)
function Obj(name){
this.name = name;
this.age = 18;
}
function Obj2(sex){
this.sex = sex;
}
var obj = new Obj('wu');
var obj2 = new Obj2('nv');
console.log(obj.name);
console.log(obj.age);
console.log(obj2.sex);
用new和不用new返回的结果大相径庭。不用new,则Obj('lyl')根本就是一个函数的正常执行,没有返回值,则默认返回undefined,而是用new操作符后js引擎就会将该函数看作构造函数看待,经过内部的一系列隐士操作,返回值就是一个对象了。
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
console.log(this.name)
}
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');
console.log(person1);
//person{name:"Zaxlct",age:28,job:"Software Engineer",sayName:f}
console.log(person2);
//person{name:"Mick",age:23,job:"Doctor",sayName:f}
console.log(person1.constructor == Person); //true
console.log(person2.constructor == Person); //true
person1 和 person2 都是 构造函数 Person 的实例 三、对象的增、删、查、改
1、增加:所谓增添一个对象属性,就是直接对该属性进行赋值操作即可,这就相当于为该对象添加了一个新的属性,而打印未添加的属性,浏览器不会报错,而是会打印出undefined.
var obj4 = {};
console.log(obj4.name); //undefined
obj4.name = 'xia';
console.log(obj4.name); //xia
2、删:我们通过delete操作符来删除一个对象的属性
var obj = {
name:'xia'
}
console.log(obj.name); //xia
delete obj.name;
console.log(obj.name); //undefined
3、改:修改一个对象的属性,直接通过赋值操作赋予其其他的值即可 var obj = {
name:'xia'
}
console.log(obj.name); //xia
obj.name = 'yun';
console.log(obj.name); //yun
4、查:查询一个对象的属性值
var obj = {
name:'xia';
}
第一种方法:
console.log(obj['name']); //xia
第二种方法:
console.log(obj.name); //xia
PS:最本质的是第一种方法,因为在使用第二种方法时,后台自动将其转换为第一种字符串的形式来查询
PS:以上的增、删、改、查三种操作都只是针对当前对象的属性进行操作,而不会影响到当前对象的原型属性。置了该属性,若两者都没有,则返回undefined。
四、包装类(未完)
1、五个原始值:number,string,Boolean,undefined,null。其中number,string,boolean是分别拥有自
己的包装类,而undefined和null是没有自己的包装类。
2.原始值不是对象,无法拥有自己的属性,但因为包装类的存在,原始值就好似可以拥有自己的属性了,但其
拥有的属性又有点特殊之处。
五、原型(prototype)(未完)
1、原型的定义: 原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先。通过改构造
函数产生的对象,可以继承该原型的属性和方法。原型也是对象。
2、利用原型特点和概念,可以提取共有属性。将一类对象的共有属性提取出来,放到该类对象的原型中,从
而不需要每次用new操作符时都重新定义一遍该共有属性。
所有的函数对象都继承制原始函数对象;Function比较特殊,他的原型对象也就是原始函数对象;所以我们往
往用Function.prototype表示原始函数对象;而原始函数对象又继承自原始对象。
六、原型链(未完)
1、定义:顾名思义,原型链就是将一个个原型串连起来,形成一条原型继承的链子。
2、原型链的构成:
如下代码例子, Child继承Parent, Parent继承GrandParent, 而GrandParent没有自定义原型,所以默认
为原型链的最顶端new Object();
原型链的形成:
A.protorype = {
name: 'a'
}
function A() (
this.name = 'A';
)
B.prototype = new A();
function B() {
this.name = 'B';
}
C.prototype = new B();
function C(){
this.name = 'C';
}
C继承B,B继承A,形成C->B->A的一条以原型为继承方式的原型链
没有,则返回undefined
(2)增:直接给实例对象增添属性,则仅仅在实例对象上增添属性,若在原型上增添属性,则在原型上
增添属属性,则在原型上增添属性,其实例继承原型增添的属性。
(3)删:delete仅仅能删除实例对象的属性,即构造函数原有的自己的属性和后来实例对象增添的属性,
还有关于delete的一点需注意,delete无法删除原型的属性和用var定义的变量(即非window的属性)
(4)改:更改实例对象的属性,则仅仅更改实例对象的属性值;更改原型的属性值,则更改原型的属性
值,继承该原型的对象对应属性值也会被更改;
p.s.理解了在原型链上的增删改查后,自然就能理解在原型上的增删改查了,只要把在原型上的增删改查
当成只有一个原型的很短的原型链即可。
七、对象继承
1、原型继承:
1)、说起原型继承,就要先由构造函数创造对象说起,首先了解构造函数内部基本原理:
(1).在函数体最前面隐式的加上this = {}
(2).执行 this.xxx = xxx;
(3).隐式的返回this
并且要注意隐士创建的this对象中有个名为__proto__的属性,其属性值为该构造函数继承的原型
prototype。
而原型对象的有一个名为constructor的属性,其属性值为继承之的构造函数,所以可以通过这两个
属性相互查看
2)、原型的定义及一些特点:
a.定义:原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先。通过该构造
函数产生的对象,可以继承该原型的属性和方法。原型也是对象。
b.利用原型特点和概念,可以提取共有属性。
c.对象如何查看原型 — > 隐式属性 __proto__
d.对象如何查看对象的构造函数 — > constructor
3)、若一个构造函数没有指定其原型,则其原型默认为Object.prototype
2、对象继承的发展
1)、传统模式:即正常的通过构造函数创建实例对象,来继承原型
缺点:继承了过多不必要的属性
2)、借用其他构造函数(即通过call / apply来改变构造函数内this对象的引用)
缺点:无法继承借用构造函数的原型
案例:
A.prototype = {
name: 'a',
age: 18,
class: 1
}
function A(){
this.name = 'A';
}
function B(){
A.call(this);
}
var b = new B();
console.log(b.name); // A
console.log(b.age) // undefined
A.prototype = {
name: 'a',
age: 18,
class: 1
}
function A(){
this.name = 'A';
}
B.prototype = A.prototype;
function B(){
this.name = 'B';
}
C.prototype = A.prototype;
function C() {
this.name = "C";
}
var a = new A();
var b = new B();
var c = new C();
console.log(a.age); // 18
console.log(b.age); //18
console.log(c.age); //18
// 原型继承成功
B.prototype.age = 20; //更改其中一个原型的age属性
console.log(b.age);//20
console.log(c.age); //20
// 继承A原型的B和C相互影响
4)、圣杯模式:Child引用了F,导致F不会销毁。
(1)正常函数形式:
function inherit (Child, Parent) {
// 借用F这个中间量来继承,而不是直接共享原型
var F = function (){}
F.prototype = Parent.prototype;
Child.prototype = new F();
// 自定义构造函数原型时,同时要更正自定义原型的constructor,
否则一般默认为Object(),次函数若不指定constructor,则
constructor为Parent
Child.prototype.constructor = Child;
Child.prototype.uber = Parent; //记录真正继承的是谁
(2)、闭包形式
var inherit = (function(){
var F = function (){};
return function (Child, Parent) {
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.prototype.uber = Parent;
}
})();
var workSpace = {
person1: {
name: 'one',
age: 18
},
person2: {
name: 'two',
age: 20
}
}
// 这样两个人虽然有同名变量,但不会相互影响,因为位于不同命名空间
// 访问第一个人的姓名
console.log(workSpace.person1.name); // one
console.log(workSpace.person2.name); //two
var person = {
foodCount: 10,
eat: function () {
this.foodCount--;
return this;
},
buy: function () {
this.foodCount++;
return this;
},
print: function () {
console.log(this.foodCount);
}
}
// foodCount初始值为10, 在连续吃了三次后,变为7
person.eat().eat().eat();
person.print(); //7
例对象后来自己添加的,而继承属性则是从原型上继承的属性,所以该方法就是判断该属性是从原型继承来的
还是自身的。
作用: 遍历一个对象的所有自身属性,因为es5中的对象遍历是默认打印包括继承自原型的属性的,
demo如下:
Person.prototype.age = 18;
function Person () {
this.name = 'lyl';
}
var person = new Person();
// 未用hasOwnProperty
// print:
// lyl
for(var prop in person) {
console.log(person[prop]);
}
// 使用hasOwnProperty
// print:
// 18 lyl
for(var prop in person) {
if(person.hasOwnProperty(prop)) {
console.log(person[prop]);
}
}
Person.prototype.age = 18;
function Person () {
this.name = 'lyl';
}
var person = new Person();
console.log('age' in person); // true
console.log('name' in person); //true
delete person.name;
console.log('name' in person); //false
3、object instanceof Object;
instanceof操作符用来判断object实例对象是否为Object构造函数创建的,如下demo
Person.prototype.age = 18;
function Person () {
this.name = 'lyl';
}
var person = new Person();
console.log(person instanceof Person); // true
console.log(new Object() instanceof Person); //false
组中,然后将该数组传
如下demo:
// demo1
function demo1() {
console.log(this);
}
// demo1() <==> this.demo1(); <==> window.demo1()
demo1(); // window
// demo2
var demo2 = {
retThis: function () {
console.log(this);
}
}
demo2.retThis(); // demo2 = {...}
// call / apply改变this
demo1.call(demo2); // demo2 = {}
demo2.retThis.call(window); // window
会反应到原对象中。
浅克隆的表现:
(1)、原始类型
//数值克隆的表现
var a="1";
var b=a;
b="2";
console.log(a);// "1"
console.log(b);// "2"
//字符串克隆的表现
var c="1";
var d=c;
d="2";
console.log(c);// "1"
console.log(d);// "2"
//字符串克隆的表现
var x=true;
var y=x;
y=false;
console.log(x);// true
console.log(y);// false
是原始类型存储的是对象的实际数据。
(2)、对象类型
前面说过,函数式一等对象,当然也是对象类型,但是函数的克隆通过浅克隆即可实现.
var m=function(){
alert(1);
};
var n=m;
n=function(){
alert(2);
};
console.log(m());//undefined
console.log(n());//undefined
这里定义一个复杂的对象类型oPerson.
var oPerson={
oName:"rookiebob",
oAge:"18",
oAddress:{
province:"beijing"
},
ofavorite:[
"swimming",
{reading:"history book"}
],
skill:function(){
console.log("bob is coding");
}
};
function clone(obj){
var result={};
for(key in obj){
result[key]=obj[key];
}
return result;
}
var oNew=clone(oPerson);
console.log(oPerson.oAddress.province);//beijing
oNew.oAddress.province="shanghai";
console.log(oPerson.oAddress.province);//shanghai
通过上面的代码,大家能看到,经过对象克隆以后,我修改oNew的地址,发现原对象oPerson
也被修改了。这说明对象的克隆不够彻底,那也就是说深度克隆失败!
深度克隆的实现:
为了保证对象的所有属性都被复制到,我们必须知道如果for循环以后,得到的元素仍是Object或者Array,
那么需要再次循环,直到元素是原始类型或者函数为止。为了得到元素的类型,我们定义一个通用函数,
用来返回传入对象的类型。
function isClass(o){
if(o===null) return "Null";
if(o===undefined) return "Undefined";
return Object.prototype.toString.call(o).slice(8,-1);
}
PS:Object.prototype.toString.call(o)能直接返回对象的类属性,形如"[object class]"
的字符串,我们通过截取class,并能知道传入的对象是什么类型。
//深度克隆
function deepClone(obj){
var result,oClass=isClass(obj);
//确定result的类型
if(oClass==="Object"){
result={};
}else if(oClass==="Array"){
result=[];
}else{
return obj;
}
for(key in obj){
var copy=obj[key];
if(isClass(copy)=="Object"){
result[key]=arguments.callee(copy);//递归调用
}else if(isClass(copy)=="Array"){
result[key]=arguments.callee(copy);
}else{
result[key]=obj[key];
}
}
return result;
}
//返回传递给他的任意对象的类
function isClass(o){
if(o===null) return "Null";
if(o===undefined) return "Undefined";
return Object.prototype.toString.call(o).slice(8,-1);
}
var oPerson={
oName:"rookiebob",
oAge:"18",
oAddress:{
province:"beijing"
},
ofavorite:[
"swimming",
{reading:"history book"}
],
skill:function(){
console.log("bob is coding");
}
};
//深度克隆一个对象
var oNew=deepClone(oPerson);
oNew.ofavorite[1].reading="picture";
console.log(oNew.ofavorite[1].reading);//picture(克隆后)
console.log(oPerson.ofavorite[1].reading);//history book(克隆前)
oNew.oAddress.province="shanghai";
console.log(oPerson.oAddress.province);//beijing(克隆前)
console.log(oNew.oAddress.province);//shanghai(克隆后)
原对象中,这样深度克隆就实现了。
这里要注意一点的就是:为什么deepClone这个函数中的result一定要判断类型?这里有一种情况,如果
你的result直接是{}对象,我明明传进去的是一个数组,结果你复制完了以后,变成了一个对象了。
//深度克隆
function deepClone(obj){
var result={},oClass=isClass(obj);
// if(oClass==="Object"){
// result={};
// }else if(oClass==="Array"){
// result=[];
// }else{
// return obj;
// }
for(key in obj){
var copy=obj[key];
if(isClass(copy)=="Object"){
result[key]=arguments.callee(copy);
}else if(isClass(copy)=="Array"){
result[key]=arguments.callee(copy);
}else{
result[key]=obj[key];
}
}
return result;
}
function isClass(o){
if(o===null) return "Null";
if(o===undefined) return "Undefined";
return Object.prototype.toString.call(o).slice(8,-1);
}
//克隆一个数组
var arr=["a","b","c"];
var oNew=deepClone(arr);
console.log(oNew);//Object {0: "a", 1: "b", 2: "c"}