// 浏览器环境
console.log(this === window); // true

// Node.js环境
console.log(this === global); // true

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

fn(); // 非严格模式下指向window，严格模式下为undefined

const obj = {
  name: '张三',
  sayName() {
    console.log(this.name);
  }
};

obj.sayName(); // "张三"

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

const p = new Person('李四');
console.log(p.name); // "李四"

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

const obj = { name: '王五' };
fn.call(obj);    // "王五"
fn.apply(obj);   // "王五"
const boundFn = fn.bind(obj);
boundFn();       // "王五"

const obj = {
  name: '赵六',
  regularFn() {
    console.log(this.name); // "赵六"
    
    const arrowFn = () => {
      console.log(this.name); // "赵六" - 继承外层this
    };
    
    arrowFn();
  }
};

obj.regularFn();

const btn = document.getElementById('myBtn');

btn.addEventListener('click', function() {
  console.log(this); // 指向触发事件的元素（btn）
});

btn.addEventListener('click', () => {
  console.log(this); // 箭头函数，继承外层作用域的this
});

const obj = {
  name: '钱七',
  regularFn() {
    setTimeout(function() {
      console.log(this.name); // undefined - this指向全局对象
    }, 100);
    
    setTimeout(() => {
      console.log(this.name); // "钱七" - 继承外层this
    }, 100);
  }
};

obj.regularFn();

const obj = {
  name: '孙八',
  regularFn() {
    const self = this; // 保存this引用
    setTimeout(function() {
      console.log(self.name); // "孙八"
    }, 100);
  }
};

const obj = {
  name: '周九',
  regularFn() {
    setTimeout(() => {
      console.log(this.name); // "周九"
    }, 100);
  }
};

const obj = {
  name: '吴十',
  regularFn() {
    setTimeout(function() {
      console.log(this.name); // "吴十"
    }.bind(this), 100);
  }
};

const obj = {
  name: '对象',
  getName() {
    return this.name;
  },
  getNameArrow: () => this.name
};

console.log(obj.getName());      // "对象"
console.log(obj.getNameArrow());  // undefined - 箭头函数继承全局this

const obj = {
  name: '嵌套',
  outer() {
    console.log(this.name); // "嵌套"
    
    function inner() {
      console.log(this.name); // undefined - this指向全局
    }
    
    inner();
  }
};

obj.outer();

const calculator = {
  value: 0,
  add(num) {
    this.value += num;
    return this; // 返回this以支持链式调用
  },
  multiply(num) {
    this.value *= num;
    return this;
  },
  getResult() {
    return this.value;
  }
};

const result = calculator.add(5).multiply(2).add(3).getResult(); // 13

const arrays = [
	[1, 2, 3, 4, 5, 6],
	[10, 20, 30, 40, 50, 60],
	[100, 200, 300, 400, 500, 600],
];

function calculateProductsFixed(arrays) {
	const results = [];

	if (arrays.length === 2) {
		for (let i = 0; i < arrays[0].length; i++) {
			for (let j = 0; j < arrays[1].length; j++) {
				const product = arrays[0][i] * arrays[1][j];
				results.push({
					combination: [arrays[0][i], arrays[1][j]],
					product: product,
				});
			}
		}
	} else if (arrays.length === 3) {
		for (let i = 0; i < arrays[0].length; i++) {
			for (let j = 0; j < arrays[1].length; j++) {
				for (let k = 0; k < arrays[2].length; k++) {
					const product = arrays[0][i] * arrays[1][j] * arrays[2][k];
					results.push({
						combination: [arrays[0][i], arrays[1][j], arrays[2][k]],
						product: product,
					});
				}
			}
		}
	}
	// 可以继续添加更多层数...

	return results;
}

function calculateProductsRecursive(arrays) {
	const results = [];

	function backtrack(index, currentCombination, currentProduct) {
		// 基本情况：已经处理完所有数组
		if (index === arrays.length) {
			results.push({
				combination: [...currentCombination],
				product: currentProduct,
			});
			return;
		}

		// 递归情况：处理当前数组的每个元素
		for (let i = 0; i < arrays[index].length; i++) {
			const value = arrays[index][i];
			currentCombination.push(value);

			// 如果是第一个元素，直接使用值；否则乘以当前值
			const newProduct = index === 0 ? value : currentProduct * value;

			backtrack(index + 1, currentCombination, newProduct);

			// 回溯：移除当前元素，尝试下一个
			currentCombination.pop();
		}
	}

	backtrack(0, [], 1);
	return results;
}

function calculateProductsIterative(arrays) {
	const results = [];

	// 使用栈来模拟递归
	const stack = [
		{
			index: 0,
			combination: [],
			product: 1,
		},
	];

	while (stack.length > 0) {
		const state = stack.pop();

		// 如果已经处理完所有数组，保存结果
		if (state.index === arrays.length) {
			results.push({
				combination: [...state.combination],
				product: state.product,
			});
			continue;
		}

		// 处理当前数组的每个元素
		for (let i = arrays[state.index].length - 1; i >= 0; i--) {
			const value = arrays[state.index][i];
			const newProduct = state.index === 0 ? value : state.product * value;

			stack.push({
				index: state.index + 1,
				combination: [...state.combination, value],
				product: newProduct,
			});
		}
	}

	return results;
}

function cartesianProduct(arrays) {
	return arrays.reduce(
		(acc, curr) => {
			return acc.flatMap((c) => curr.map((n) => [...c, n]));
		},
		[[]]
	);
}

function calculateProductsCartesian(arrays) {
	const combinations = cartesianProduct(arrays);

	return combinations.map((combination) => ({
		combination,
		product: combination.reduce((acc, val) => acc * val, 1),
	}));
}

function* productGenerator(arrays) {
	function* backtrack(index, currentCombination, currentProduct) {
		if (index === arrays.length) {
			yield {
				combination: [...currentCombination],
				product: currentProduct,
			};
			return;
		}

		for (let i = 0; i < arrays[index].length; i++) {
			const value = arrays[index][i];
			currentCombination.push(value);
			const newProduct = index === 0 ? value : currentProduct * value;

			yield* backtrack(index + 1, currentCombination, newProduct);

			currentCombination.pop();
		}
	}

	yield* backtrack(0, [], 1);
}

// 使用示例
function getProductsUsingGenerator(arrays) {
	const results = [];
	for (const result of productGenerator(arrays)) {
		results.push(result);
	}
	return results;
}

// utils/date.js
export function formatDate(date) {
  return new Date(date).toLocaleDateString('zh-CN');
}

export function formatDateTime(date) {
  return new Date(date).toLocaleString('zh-CN');
}

// utils/string.js
export function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

export function truncate(str, length = 50) {
  return str.length > length ? str.substring(0, length) + '...' : str;
}

// MyComponent.vue
<script>
import { formatDate, capitalize } from '@/utils/date';
import { truncate } from '@/utils/string';

export default {
  data() {
    return {
      article: {
        title: 'vue2工具函数使用指南',
        content: '这是一篇关于Vue2中工具函数使用的详细指南...',
        createdAt: '2025-11-07T10:00:00'
      }
    };
  },
  computed: {
    formattedDate() {
      return formatDate(this.article.createdAt);
    },
    formattedTitle() {
      return capitalize(this.article.title);
    },
    truncatedContent() {
      return truncate(this.article.content, 30);
    }
  }
};
</script>

<template>
  <div>
    <h2>{{ formattedTitle }}</h2>
    <p>发布时间：{{ formattedDate }}</p>
    <p>{{ truncatedContent }}</p>
  </div>
</template>

// main.js
import Vue from 'vue';
import App from './App.vue';
import { formatDate, formatDateTime } from '@/utils/date';
import { capitalize, truncate } from '@/utils/string';

// 挂载工具函数到Vue原型
Vue.prototype.$formatDate = formatDate;
Vue.prototype.$formatDateTime = formatDateTime;
Vue.prototype.$capitalize = capitalize;
Vue.prototype.$truncate = truncate;

new Vue({
  render: h => h(App)
}).$mount('#app');

// MyComponent.vue
export default {
  data() {
    return {
      article: {
        title: 'vue2原型方法',
        createdAt: '2025-11-07T10:00:00'
      }
    };
  },
  computed: {
    formattedDate() {
      return this.$formatDate(this.article.createdAt);
    },
    formattedTitle() {
      return this.$capitalize(this.article.title);
    }
  }
};

// plugins/utils.js
import { formatDate, formatDateTime } from '@/utils/date';
import { capitalize, truncate } from '@/utils/string';
import { debounce, throttle } from '@/utils/performance';

const UtilsPlugin = {
  install(Vue) {
    // 挂载工具函数
    Vue.prototype.$utils = {
      formatDate,
      formatDateTime,
      capitalize,
      truncate,
      debounce,
      throttle
    };
    
    // 也可以挂载为全局属性
    Vue.prototype.$formatDate = formatDate;
    Vue.prototype.$debounce = debounce;
  }
};

export default UtilsPlugin;

// main.js
import Vue from 'vue';
import UtilsPlugin from '@/plugins/utils';

Vue.use(UtilsPlugin);

// MyComponent.vue
export default {
  data() {
    return {
      searchText: ''
    };
  },
  methods: {
    // 使用防抖函数
    handleSearch: this.$utils.debounce(function() {
      // 搜索逻辑
      console.log('搜索:', this.searchText);
    }, 300),
    
    formatData() {
      const date = this.$utils.formatDate(new Date());
      const title = this.$utils.capitalize('hello world');
      return { date, title };
    }
  }
};

// mixins/utils.js
export default {
  methods: {
    $formatCurrency(amount) {
      return '¥' + amount.toFixed(2);
    },
    
    $validateEmail(email) {
      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return regex.test(email);
    },
    
    $deepClone(obj) {
      return JSON.parse(JSON.stringify(obj));
    }
  }
};

// 在组件中使用
import utilsMixin from '@/mixins/utils';

export default {
  mixins: [utilsMixin],
  methods: {
    processOrder(order) {
      const clonedOrder = this.$deepClone(order);
      clonedOrder.total = this.$formatCurrency(clonedOrder.amount);
      return clonedOrder;
    }
  }
};

// composables/useUtils.js
import { ref, computed } from 'vue';
import { formatDate, formatDateTime } from '@/utils/date';
import { capitalize, truncate } from '@/utils/string';

export function useUtils() {
  const formatDate = (date) => {
    return new Date(date).toLocaleDateString('zh-CN');
  };
  
  const capitalize = (str) => {
    return str.charAt(0).toUpperCase() + str.slice(1);
  };
  
  const truncate = (str, length = 50) => {
    return str.length > length ? str.substring(0, length) + '...' : str;
  };
  
  return {
    formatDate,
    capitalize,
    truncate
  };
}

// 在组件中使用
<script setup>
import { ref } from 'vue';
import { useUtils } from '@/composables/useUtils';

const { formatDate, capitalize, truncate } = useUtils();

const article = ref({
  title: 'vue3工具函数使用指南',
  content: '这是一篇关于Vue3中工具函数使用的详细指南...',
  createdAt: '2025-11-07T10:00:00'
});

const formattedDate = computed(() => formatDate(article.value.createdAt));
const formattedTitle = computed(() => capitalize(article.value.title));
const truncatedContent = computed(() => truncate(article.value.content, 30));
</script>

<template>
  <div>
    <h2>{{ formattedTitle }}</h2>
    <p>发布时间：{{ formattedDate }}</p>
    <p>{{ truncatedContent }}</p>
  </div>
</template>

// utils/date.js
export function formatDate(date) {
  return new Date(date).toLocaleDateString('zh-CN');
}

// 在组件中使用
<script setup>
import { ref, computed } from 'vue';
import { formatDate } from '@/utils/date';

const article = ref({
  createdAt: '2025-11-07T10:00:00'
});

const formattedDate = computed(() => formatDate(article.value.createdAt));
</script>

// App.vue
<script setup>
import { provide } from 'vue';
import { formatDate, formatDateTime } from '@/utils/date';
import { capitalize, truncate } from '@/utils/string';

// 提供工具函数
provide('utils', {
  formatDate,
  formatDateTime,
  capitalize,
  truncate
});
</script>

// 子组件中使用
<script setup>
import { inject, computed } from 'vue';

const utils = inject('utils');
const article = ref({
  title: 'vue3 provide/inject',
  createdAt: '2025-11-07T10:00:00'
});

const formattedDate = computed(() => utils.formatDate(article.value.createdAt));
</script>

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { formatDate, capitalize } from '@/utils/date';

const app = createApp(App);

// 配置全局属性
app.config.globalProperties.$formatDate = formatDate;
app.config.globalProperties.$capitalize = capitalize;

app.mount('#app');

// 在组件中使用（Options API）
export default {
  computed: {
    formattedDate() {
      return this.$formatDate(this.article.createdAt);
    }
  }
};

// 在Composition API中使用
import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
const formattedDate = instance.proxy.$formatDate(article.createdAt);

// TypeScript中需要声明类型
import Vue from 'vue';

declare module 'vue/types/vue' {
  interface Vue {
    $formatDate: (date: string) => string;
    $capitalize: (str: string) => string;
  }
}

// 自动类型推断
import type { App } from 'vue';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $formatDate: (date: string) => string;
  }
}

export function setupUtils(app: App) {
  app.config.globalProperties.$formatDate = formatDate;
}

export default {
  data() {
    return { /* ... */ };
  },
  computed: {
    // 工具函数分散在各个选项中
    formattedDate() {
      return this.$formatDate(this.date);
    }
  },
  methods: {
    // 业务逻辑和工具函数混合
    processData() {
      const formatted = this.$formatDate(this.date);
      // ... 业务逻辑
    }
  }
};

<script setup>
import { useUtils } from '@/composables/useUtils';
import { useBusinessLogic } from '@/composables/useBusinessLogic';

// 工具函数逻辑集中管理
const { formatDate, capitalize } = useUtils();

// 业务逻辑分离
const { processData } = useBusinessLogic({ formatDate, capitalize });
</script>

// utils/validation.js
export function validateEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

export function validatePhone(phone) {
  const regex = /^1[3-9]\d{9}$/;
  return regex.test(phone);
}

// 挂载到Vue原型
Vue.prototype.$validate = {
  email: validateEmail,
  phone: validatePhone
};

// 组件中使用
export default {
  methods: {
    submitForm() {
      if (!this.$validate.email(this.form.email)) {
        this.$message.error('邮箱格式错误');
        return;
      }
    }
  }
};

// composables/useValidation.js
import { ref } from 'vue';

export function useValidation() {
  const validateEmail = (email) => {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  };
  
  const validatePhone = (phone) => {
    const regex = /^1[3-9]\d{9}$/;
    return regex.test(phone);
  };
  
  return {
    validateEmail,
    validatePhone
  };
}

// 组件中使用
<script setup>
import { useValidation } from '@/composables/useValidation';

const { validateEmail, validatePhone } = useValidation();

const submitForm = () => {
  if (!validateEmail(form.value.email)) {
    message.error('邮箱格式错误');
    return;
  }
};
</script>